Use of Datatables form plugin

Datatables is a jquery form plugin. It is a highly flexible tool that can add advanced interactivity to any HTML table.

1. Download the latest version of DataTables.

Put the media folder in the directory

2. Introduce js and css

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="/static/common/media/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="/static/common/media/js/jquery.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="/static/common/media/js/jquery.dataTables.js"></script>

Or import with cdn

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>

3. Add html code:

<table id="dataTable" class="table table-bordered table-hover table-striped" cellspacing="0">
     <thead>
        <tr>
           <th>Name</th>
           <th>Mobile</th>
           <th>Email</th>
           <th>Password</th>
           <th>Action</th>
         </tr>
      </thead>
      <tbody>
      </tbody>
 </table>

<tbody></tbody> must be written

4. Initialize Datatables

function queryData(enterpriseId){
    var table = $('#dataTable').DataTable({
           "bServerSide": true,//Whether to start server mode
           "destroy": true,//Destroy all tables that match the selection, and recreate the table with new options
           "sAjaxSource": '${ctx}/admin/ajax/enterpriseUser/list',//url
           "sPaginationType": "full_numbers", // Pagination, a total of two styles
           "iDisplayLength": 8, //Display 8 items on one page
           "aoColumns": [
                {"data": "nickname"},
                {"data": "mobile"},
                {"data": "email"},
                {"data": "password"},
                {"data": "operator",
                   "render": function(data, type, full, meta) {
                   if(full.isavalible === 0){
                         return '<a class="opBtn attr'+full.id+'" href="javascript:updateIsavalible('+full.id+',1)">冻结</a>'
                                +'<a class="opBtn" href="${ctx}/admin/enterprise/toUpdateEnterpriseUser?id='+full.id+'">修改</a>';
                         } else {
                            return '<a class="opBtn attr'+full.id+'" href="javascript:updateIsavalible('+full.id+',0)">解冻</a>'
                                  +'<a class="opBtn" href="${ctx}/admin/enterprise/toUpdateEnterpriseUser?id='+full.id+'">修改</a>';
                            }
                        }
                    }
                ],
                "info": true,//whether to display the information in the lower left corner of the table
                "paging": true,//Whether to enable local paging
                "processing": true,//whether to display the processing status
                "searching": false,//Whether to start local search
                //"scrollX": "900",//The width exceeds the problem*/
                //"scrollCollapse" : true,//The width exceeds the problem*//*/
                //"bAutoWidth": true, //The width exceeds the problem*/
                "lengthChange": false,//Whether the user is allowed to change the number of records displayed on each page of the table
                "sort": false,//Whether sorting is supported
                "oLanguage" : { // internationalization configuration
                    "sProcessing" : "Fetching data, please wait...",
                    "sLengthMenu" : "Show _MENU_ items",
                    "sZeroRecords" : "No data found",
                    "sInfo" : "The total number of records from _START_ to _END_ is _TOTAL_",
                    "sInfoEmpty" : "The number of records is 0",
                    "sInfoFiltered" : "(Total records_MAX_ records)",
                    "sInfoPostFix" : "",
                    "sSearch" : "查询",
                    "sUrl" : "",
                    "oPaginate" : {
                        "sFirst" : "First page",
                        "sPrevious" : "Previous page",
                        "sNext" : "Next page",
                        "sLast" : "Last page"
                    }
                },
                //initComplete: function(settings, data) {},//Callback function after initialization
                //"createdRow": function(row, data, index) {},//Callback function when the row is created
                //Server side, data callback processing
                "fnServerData": function(sSource, aDataSet, fnCallback) {
                    var pagefirstIndex = aDataSet[3].value //The index of the beginning of each page
                    var currentPage = pagefirstIndex/8 +1;//The number of pages clicked (8 rows per page)
                    $.ajax({
                        "dataType": 'json',
                        "type": "get",
                        "url": sSource,
                        "data": {
                            enterpriseId:enterpriseId,
                            currentPage:currentPage
                        },
                        "success": function(result) {
                            if(result.success){
                                var msg = {};
                                msg['data'] = result.entity.users;
                                msg["iTotalRecords"] = result.entity.pageEntity.totalResultSize;
                                msg["iTotalDisplayRecords"] = result.entity.pageEntity.totalResultSize;
                                fnCallback(msg);
                            } else {
                                var msg = {};
                                msg['data'] = [];
                                msg["iTotalRecords"] = 0;
                                msg["iTotalDisplayRecords"] = 0;
                                fnCallback(msg);
                                alert(result.message)
                            }
                        }
                    });
                }
            });
        }