hoangweb
3/8/2018 - 10:11 AM

jtable

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)\/"}
]
}
-->