集成JQuery.DataTable常见问题记录

最近用网上一些开源免费的Bootstrap模板做开发的时候发现很多模板集成的table插件都用的是jquery的DataTable插件，读了一下官方文档发现不太好理解（估计是蠢的原因）。想着写篇快速上手的文章供大家参考，发现好像也没太大必要（官方有详细文档，读起来需要花点时间），还是记录一下开发中遇到的问题就算了（方便自己以后忘了回来看，哈哈）。

先上官方网站&中文网

• 英文官网
• 中文网
• github上常见问题总结！！！

1. 指定返回json中数据源data& recordsTotal & recordsFiltered

DataTable 要求服务器返回的json里面必须含有特定的字段名（具体看文档），但是你后台返回的字段名跟它不对应，那就可以在option中的ajax中的dataSrc中配置，下面是参考代码

$('#tableId').DataTable( {
        ......
        ajax:  {
          ......
          dataSrc: function(json) {
            json.recordsTotal = json.totalElements;
            json.recordsFiltered = json.totalElements;
            //必须返回是dataSrc数据！！！
            return json.content;
          }
        }
        ......
      });

2. 修改请求参数，添加查询条件（如：pageNum，pageSize）

DataTable 默认发送参数里面，分页大小是length，没有页码，有页的开始位置（类似hibernate里面offSet）start
如果你是使用像Spring提供的分页类Page的话，分页参数就是size分页大小，page页码，那么默认的参数就不符合你的要求了，这时候可以类似上述例子1中那样修改请求参数

$('#tableId').DataTable( {
          ......
          data: function ( d ) {
            // 每次reload都会运行此方法
            //添加符合你后台分页要求的参数
            d.size = d.length;
            d.page = d.start/d.length;
            //添加查询条件
            //动态的form条件<form id="form-params">......</form>
            var params = $('#form-params').serializeArray();
            for (var i=0;i<params.length;i++) {
              d[params[i].name] = params[i].value;
            }
          }
          ......
      });

3. 自定义工具栏

最好事先读dom的解释，这里不详细解释

$('#tableId').DataTable( {
        ......
        //定义DataTable的Dom构成
        dom: '<"toolbar">frtip'
        ......
      });
//拼接按钮
$("div.toolbar").html('<button type="button" onclick="alert (\'button click\')"> ');

4. 自定义ajax function

$('#tableId').DataTable( {
        ......
        //定义ajax function
        //data - 查询参数
        //callback - datatable回调函数callback(data),必须运行才能显示数据
        //settings - datatable设置
        ajax: function(data, callback, settings) {
          // paga param
          data.size = data.length;
          data.page = data.start/data.length;
          //query params
          var params = $('#form-params').serializeArray();
          for (var i=0;i<params.length;i++) {
            data[params[i].name] = params[i].value;
          }
          //sort params
          var columns = data.columns;
          var orders = data.order;
          var sort = '';
          for (var i=0;i<orders.length;i++) {
            var order = orders[i];
            sort += sort==''?'':'&';
            sort += 'sort='+columns[order.column].data+','+order.dir;
          }

          $.ajax({
            url : ctx + "/dc/taskLog/doQuery.action?"+sort,
            type: 'get',
            data : data,
            dataType:'json',
            success: function(data) {
              data.recordsTotal = data.totalElements;
              data.recordsFiltered = data.totalElements;
              data.data = data.content;
              callback(data);
            }
          });
        }
        ......
      });

有什么问题可以一起交流学习。赏面的也可以请作者喝杯java，哈哈。