Datatables表格插件的使用

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

1、下载DataTables的最新版本。

把media文件夹放在目录里面

2、引入js和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>

或者用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、添加html代码：

 <table id="dataTable" class="table table-bordered table-hover table-striped" cellspacing="0">
     <thead>
        <tr>
           <th>姓名</th>
           <th>手机</th>
           <th>邮箱</th>
           <th>密码</th>
           <th>操作</th>
         </tr>
      </thead>
      <tbody>
      </tbody>
 </table>

<tbody></tbody>一定要写

4、初始化Datatables

function queryData(enterpriseId){
    var table = $('#dataTable').DataTable({
           "bServerSide": true,//是否开始服务器模式
           "destroy": true,//销毁所有符合选择的table，并且用新的options重新创建表格
           "sAjaxSource": '${ctx}/admin/ajax/enterpriseUser/list',//url
           "sPaginationType": "full_numbers", // 分页，一共两种样式
           "iDisplayLength": 8, //一页显示8条
           "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,//是否显示表格左下角的信息
                "paging": true,//是否开启本地分页
                "processing": true,//是否显示处理状态
                "searching": false,//是否开始本地搜索
                //"scrollX": "900",//宽度超出问题*/
                //"scrollCollapse" : true,//宽度超出问题*//*/
                //"bAutoWidth": true, //宽度超出问题*/
                "lengthChange": false,//是否允许用户改变表格每页显示的记录数
                "sort": false,//是否支持排序
                "oLanguage" : { // 国际化配置
                    "sProcessing" : "正在获取数据，请稍后...",
                    "sLengthMenu" : "显示 _MENU_ 条",
                    "sZeroRecords" : "没有找到数据",
                    "sInfo" : "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条",
                    "sInfoEmpty" : "记录数为0",
                    "sInfoFiltered" : "(全部记录数 _MAX_ 条)",
                    "sInfoPostFix" : "",
                    "sSearch" : "查询",
                    "sUrl" : "",
                    "oPaginate" : {
                        "sFirst" : "第一页",
                        "sPrevious" : "上一页",
                        "sNext" : "下一页",
                        "sLast" : "最后一页"
                    }
                },
                //initComplete: function(settings, data) {},//初始化结束后的回调函数
                //"createdRow": function(row, data, index) {},//行被创建时回调函数
                //服务器端，数据回调处理
                "fnServerData": function(sSource, aDataSet, fnCallback) {
                    var pagefirstIndex = aDataSet[3].value //每页开始的索引
                    var currentPage = pagefirstIndex/8 +1;//点击的第几页（每页8行）
                    $.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)
                            }
                        }
                    });
                }
            });
        }