AJAX based CRUD tables http://www.jtable.org/ Table/Grid
<!-- Include one of jTable styles. -->
<link href="/jtable/themes/metro/blue/jtable.min.css" rel="stylesheet" type="text/css" />
<!-- Include jTable script file. -->
<script src="/jtable/jquery.jtable.min.js" type="text/javascript"></script>
-------------------------------------------------
<!--
Creating a container
-->
<div id="PersonTableContainer"></div>
-------------------------------------------------
<script type="text/javascript">
$(document).ready(function () {
$('#PersonTableContainer').jtable({
title: 'Table of people', //title of the table
//perform AJAX operations on server, must return a JSON object
actions: {
listAction: '/GettingStarted/PersonList', //to get data
//note: create record form is automatically generated by jTable
createAction: '/GettingStarted/CreatePerson', //submit (POST)
//Editing/Updating a record
updateAction: '/GettingStarted/UpdatePerson',
//Deleting a record
deleteAction: '/GettingStarted/DeletePerson'
},
fields: {
PersonId: {
key: true,
list: false
},
Name: {
title: 'Author Name',
width: '40%'
},
Age: {
title: 'Age',
width: '20%'
},
RecordDate: {
title: 'Record date',
width: '30%',
type: 'date',
create: false,
edit: false
}
}
});
//can be called after table initialized
$('#PersonTableContainer').jtable('load');
});
</script>
<!--JSON return from server.
{
"Result":"OK",
"Records":[
{"PersonId":1,"Name":"Benjamin Button","Age":17,"RecordDate":"\/Date(1320259705710)\/"},
{"PersonId":2,"Name":"Douglas Adams","Age":42,"RecordDate":"\/Date(1320259705710)\/"},
{"PersonId":3,"Name":"Isaac Asimov","Age":26,"RecordDate":"\/Date(1320259705710)\/"},
{"PersonId":4,"Name":"Thomas More","Age":65,"RecordDate":"\/Date(1320259705710)\/"}
]
}
-->