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" οnclick="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 给前台即可

效果图