最近用網(wǎng)上一些開源免費的Bootstrap模板做開發(fā)的時候發(fā)現(xiàn)很多模板集成的table插件都用的是jquery的DataTable插件，讀了一下官方文檔發(fā)現(xiàn)不太好理解（估計是蠢的原因）。想著寫篇快速上手的文章供大家參考，發(fā)現(xiàn)好像也沒太大必要（官方有詳細文檔，讀起來需要花點時間），還是記錄一下開發(fā)中遇到的問題就算了（方便自己以后忘了回來看，哈哈）。

先上官方網(wǎng)站&中文網(wǎng)

• 英文官網(wǎng)
• 中文網(wǎng)
• github上常見問題總結(jié)?。?！

1. 指定返回json中數(shù)據(jù)源data& recordsTotal & recordsFiltered

DataTable 要求服務(wù)器返回的json里面必須含有特定的字段名（具體看文檔），但是你后臺返回的字段名跟它不對應(yīng)，那就可以在option中的ajax中的dataSrc中配置，下面是參考代碼

$('#tableId').DataTable( {
        ......
        ajax:  {
          ......
          dataSrc: function(json) {
            json.recordsTotal = json.totalElements;
            json.recordsFiltered = json.totalElements;
            //必須返回是dataSrc數(shù)據(jù)！??！
            return json.content;
          }
        }
        ......
      });

2. 修改請求參數(shù)，添加查詢條件（如：pageNum，pageSize）

DataTable 默認發(fā)送參數(shù)里面，分頁大小是length，沒有頁碼，有頁的開始位置（類似hibernate里面offSet）start
如果你是使用像Spring提供的分頁類Page的話，分頁參數(shù)就是size分頁大小，page頁碼，那么默認的參數(shù)就不符合你的要求了，這時候可以類似上述例子1中那樣修改請求參數(shù)

$('#tableId').DataTable( {
          ......
          data: function ( d ) {
            // 每次reload都會運行此方法
            //添加符合你后臺分頁要求的參數(shù)
            d.size = d.length;
            d.page = d.start/d.length;
            //添加查詢條件
            //動態(tài)的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構(gòu)成
        dom: '<"toolbar">frtip'
        ......
      });
//拼接按鈕
$("div.toolbar").html('<button type="button" onclick="alert (\'button click\')"> ');

4. 自定義ajax function

$('#tableId').DataTable( {
        ......
        //定義ajax function
        //data - 查詢參數(shù)
        //callback - datatable回調(diào)函數(shù)callback(data),必須運行才能顯示數(shù)據(jù)
        //settings - datatable設(shè)置
        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);
            }
          });
        }
        ......
      });

有什么問題可以一起交流學(xué)習。賞面的也可以請作者喝杯java，哈哈。