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
});