dataTable 总结

dataTables

1 引用

jquery.dataTables.min.css

jquery.dataTables.min.js

2 js

$(document).ready(function(){

        $('#table').DataTable();

    });

$('#table').DataTable({

   "destroy":true,//--- 设为ture时通知dataTable函数完全重新建立一个新的控件实例,在一个页面内反复对同一个控件加载dataTable函数并且想重新建立控件时使用.

   "data": historyDynamic.tableData[1].data,//用data  columns可以js重新渲染表头和表格信息

   "columns":historyDynamic.tableData[1].columns,

   "searching": false,

   "paging": false,

   "autoWidth": true,

   "info":false,

   "lengthChange":false

});

//用此方法去除表格的上下部分边框部分

$('#table2_wrapper').removeClass("dataTables_wrapper no-footer" );

$('.span6').remove();

json格式

[
  {
    "columns":[
                {"title":""},
                {"title":"余氯（mg/L）"},
                {"title":"浊度（NTU）"},
                {"title":"PH"}
              ],
    "data":[
              [
                "最大值",
                "0.14",
                "0.14",
                "0.14"
              ],
              [
                "最大值时间",
                "2017-02-01 08:00:00",
                "2017-02-01 08:00:00",
                "2017-02-01 08:00:00"
              ],
              [
                "最小值",
                "0.14",
                "0.14",
                "0.14"
              ],
              [
                "最小值时间",
                "2017-02-01 08:00:00",
                "2017-02-01 08:00:00",
                "2017-02-01 08:00:00"
              ],
              [
                "平均值",
                "0.14",
                "0.14",
                "0.14"
              ]
                   ]
          },
  {
    "columns":[
      {"title":""},
      {"title":"日期"},
      {"title":"余氯（mg/L）"},
      {"title":"浊度（NTU）"},
      {"title":"PH"},
      {"title":"通讯状态"}
    ],
    "data":[

      [
        "",
        "2017-02-01 08:00:00",
        "0.14",
        "0.14",
        "0.14",
        "在线"
      ],
      [
        "",
        "2017-02-01 08:00:00",
        "0.14",
        "0.14",
        "0.14",
        "在线"
      ],
      [
        "",
        "2017-02-01 08:00:00",
        "0.14",
        "0.14",
        "0.14",
        "在线"
      ]
    ],
    "data1":[

      [
        "2017-02-01 08:00:00",
        "0.14",
        "0.14",
        "0.14",
        "在线"
      ],
      [
        "2017-02-01 08:00:00",
        "0.14",
        "0.14",
        "0.14",
        "在线"
      ],
      [
        "2017-02-01 08:00:00",
        "0.14",
        "0.14",
        "0.14",
        "在线"
      ]
    ]
  }
]

ajax方法加载dataTables

$('#example').dataTable( {

  "ajax": {

    "url": "data.json",

    "dataSrc": "data"  //此tableData这个属性是data.json 里面的属性名为data

  }

} );

加序号

var t = $('#table2').DataTable({
   "columnDefs": [{
      "searchable": false,
      "orderable": false,
      "targets": 0
   }],
   "order": [[1, 'asc']]
});
t.on('order.dt search.dt',
   function() {
      t.column(0, {
         search: 'applied',
         order: 'applied'
      }).nodes().each(function(cell, i) {
         cell.innerHTML = i + 1;
      });
   }).draw();

json中需要空出第一列是序号空

checkbox功能（此checkbox也需要占第一列）：

"aoColumnDefs":[
   {"aTargets":[0],
      "width":"4%",
      "mRender":function(data,type,full){
         return "<label><input type='checkbox'  class='ace' /><span class='lbl'></span></label>";
      }
   }
],

var table2 =$('#table2').DataTable({
   "processing" : true,
   "destroy":true,
   "data": historyDynamic.tableData[1].data,
   "aoColumnDefs":[
      {"aTargets":[0],
         "width":"8%",
         "mRender":function(data,type,full){
            return "<label><input type='checkbox'  class='ace' /><span class='lbl'></span></label>";
         }
      }
   ],
   "columns":historyDynamic.tableData[1].columns,
   "searching": false,
   "paging": false,
   "autoWidth": true,
   "info":false,
   "lengthChange":false,
   "showRowNumber":true
});