Datatables是一款jquery表格插件。它是一個高度靈活的工具，可以將任何HTML表格添加高級的交互功能。
分頁，即時搜索和排序
幾乎支持任何數據源：DOM， javascript， Ajax 和 服務器處理
支持不同主題 DataTables, jQuery UI, Bootstrap, Foundation
各式各樣的擴展: Editor, TableTools, FixedColumns ……
豐富多樣的option和強大的API
支持國際化
超過2900+個單元測試
免費開源 （ MIT license ）！ 商業支持
更多特性請到官網查看
http://www.datatables.club/
下面是使用dt構建數據源和綁定
1.構建datatable數據源
table = $('#hjInfoTable').DataTable({ //構造函數
"data": data,//數據源--參過datatable.js說明文檔data，data傳入就行
"columns": [
{ "title": "<input align=\"center\" type=\"checkbox\" class=\"checkAll\" checked=\"checked\" id=\"checkAll\"/>" },
{ "title": "工程編號s" },
{ "title": "用戶號" },
{ "title": "戶名" },
{ "title": "地址" },
],
"oLanguage": {
"sLengthMenu": "每頁顯示 _MENU_ 條",
"sProcessing": "<img src='" + imgUrl + "'/><span> Loading...</span>",
"sInfo": "從 _START_ 到 _END_, 共 _TOTAL_ 條記錄",
"sInfoEmpty": "",
"sGroupActions": "_TOTAL_ records selected: ",
"sAjaxRequestGeneralError": "未能連接服務器，請重試！",
"sEmptyTable": "未找到相關記錄",
"sZeroRecords": "共 0 條記錄",
"sInfoFiltered": "(從 _MAX_ 條數據中檢索)",
"oPaginate": {
"sPrevious": "上一頁",
"sNext": "下一頁",
"sPage": "頁",
"sPageOf": "of"
},
"sSearch": "搜索",
},
"bFilter": false, //搜索欄
"fnInitComplete": function (oSettings, json) { //datatables初始化完畢后回調方法
.......里面可加回調事件
},
"fnCreatedRow": function (nRow, aData, iDataIndex) {
$(nRow).css("cursor", "pointer");
},
"aoColumnDefs": [{
"render": function (data, type) {
return "<div align='center'><input type=\"checkbox\" checked=\"checked\" name=\"ckb-jobid\" value=" + data + "></div>";
}, "aTargets": 0 //第一列
}, { //隱藏業務類型列
"targets": [5],
"visible": false
},
{ //隱藏划價人列
"targets": [6],
"visible": false
}
{ //隱藏用戶站點列
"targets": [11],
"visible": false
}, ],
});
}
1.全選或者全部不選
//使用live綁定數據，因為checkAll還沒有加載好
$("#checkAll").die().live("click", function () {
if (this.checked) {
$(this).attr('checked', 'checked')
$("input[name='ckb-jobid']").each(function () {
this.checked = true;
});
} else {
$(this).removeAttr('checked')
$("input[name='ckb-jobid']").each(function () {
this.checked = false;
});
}
});
2.點擊單個按鈕
$("input[name='ckb-jobid']").die().live("click", function () {
if ($(this).is(":checked") == false) {
$("#checkAll").prop("checked", false);
} else {
var flag = true;
$("#checkAll").prop("checked", true);
$("input[name='ckb-jobid']").each(function () {
if (this.checked == false) {
$("#checkAll").prop("checked", false);
flag = false;
return;
}
});
}
});
（轉載https://blog.csdn.net/younghaiqing/article/details/83010449）