datatables 小demo

一直有朋友问我datatables怎么用，干脆写篇文章
申明（这是从自己正在做的项目中扣出来的一小块）

html 就这样一个div

 <div class="portlet-body">        <table class="table table-striped table-bordered table-hover" id="sample_1"></table> </div>

引入(其实只需要一个datatables的css)

<link rel="stylesheet" type="text/css" href="static/lib/jquery-ui/css/ui-lightness/jquery-ui-1.10.4.css"/><link rel="stylesheet" type="text/css" href="static/assets/plugins/data-tables/DT_bootstrap.css"/><link rel="stylesheet" type="text/css" href="static/assets/plugins/bootstrap/css/bootstrap.css"/>

js(其实只需要一个datatables的js)

<script type="text/javascript" src="static/assets/plugins/data-tables/jquery.dataTables.js"></script><script type="text/javascript" src="static/assets/plugins/data-tables/DT_bootstrap.js"></script><script type="text/javascript" src="static/lib/jquery-ui/js/jquery-ui-1.10.4.js"></script><script type="text/javascript" src="static/assets/scripts/core/datatable.js"></script>

//生成表的方法   function initDispatchingTable() {      var dataTable = $('#sample_1').dataTable({        "bServerSide": true, //是否启动服务器端数据导入        "aLengthMenu": [          [10, 20, 50],          [10, 20, 50]        ], //更改显示记录数选项        "iDisplayLength": 10, //默认显示的记录数        "sPaginationType": "bootstrap", //详细分页组，可以支持直接跳转到某页        "aaSorting": [          [0, "desc"]        ], //默认的排序方式，第1列，升序排列        "bFilter": false, //是否启动过滤、搜索功能        "bDestroy": true,        "bLengthChange": false,        "oLanguage": { //国际化配置          "sProcessing": "正在获取数据，请稍后...",          "sLengthMenu": "显示 _MENU_ 条",          "sZeroRecords": "没有您要搜索的内容",          "sInfo": "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条",          "sInfoEmpty": "记录数为0",          "sInfoFiltered": "(全部记录数 _MAX_ 条)",          "sInfoPostFix": "",          "sSearch": "搜索",          "sUrl": "",          "oPaginate": {            "sFirst": "第一页",            "sPrevious": "上一页",            "sNext": "下一页",            "sLast": "最后一页"          }        },        "aoColumns": [          {"mData": "id", "sTitle": "ID", "sClass": "center", "bSortable": false, "bVisible": false, "bSearchable": false},          {"mData": "userId", "sTitle": "USERID", "sClass": "center", "bSortable": false, "bVisible": false, "bSearchable": false},          {"mData": "loginName", "sTitle": "用户名", "sClass": "right", "bSortable": true, "bSortable": true},          {"mData": "nickName", "sTitle": "用户昵称", "sClass": "right", "bSortable": true, "bSortable": true},          {"mData": "phone", "sTitle": "电话", "sClass": "right", "bSortable": true, "bSortable": true},          {"mData": "loginTime", "sTitle": "登录时间", "sClass": "right", "bSortable": true, "bSortable": true},          {"mData": "logOutTime", "sTitle": "登出时间", "sClass": "right", "bSortable": true, "bSortable": true},          {"mData": null, "sTitle": "操作", "sClass": "right", "bSortable": true,"sWidth":"90px",            "fnRender": function (obj) {              return '<span class="label label-sm label-success" onclick="findOpe(this);" style="cursor: pointer;">查看操作日志</span>';            }          },        ],        "sAjaxSource": "log/findLogin",//数据源 调用后台路径        "fnDrawCallback": function( oSettings ) {          $("[data-toggle='tooltip']").tooltip();        }      });      return dataTable;    }  jQuery(document).ready(function () {//直接在ready 方法中调用生成表的initDispatchingTable() 即可      initDispatchingTable();    });

//后台我只扣出controller中的一部分    @RequestMapping(value = "/findLogin")    @ResponseBody    public String findLogin(String searchValue,@DataTableModel Pageable pageable){        /***1.处理搜索条件***/        if(!StringUtils.isEmpty(searchValue)){            searchValue = "%" + searchValue.trim() + "%";        }else{            searchValue = "%%";        }        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");        Page<UserLog> userLogs = userLogRepository.findAll(searchValue,pageable);        JSONArray jsonArray = new JSONArray();        for (UserLog userLog:userLogs){            JSONObject jo = new JSONObject();            jo.put("id",userLog.getUserLogId());            jo.put("userId",userLog.getUser().getUserId());            jo.put("loginName",userLog.getUser().getLoginName());            jo.put("nickName",userLog.getUser().getNickName());            jo.put("phone",userLog.getUser().getPhone()==null?"":userLog.getUser().getPhone());            jo.put("loginTime",sdf.format(userLog.getLoginTime()));            jo.put("logOutTime",userLog.getLogoutTime()==null?"":sdf.format(userLog.getLogoutTime()));            jsonArray.add(jo);        }        JSONObject result = new JSONObject();        result.put("aaData", jsonArray);        result.put("iTotalRecords", userLogs.getTotalElements());        result.put("iTotalDisplayRecords", userLogs.getTotalElements());        return result.toJSONString();    }//只需要返回一个json 给前台即可

效果图