Datatables是一款jquery表格外掛。它是一個高度靈活的工具，可以將任何HTML表格新增高階的互動功能。

• 分頁，即時搜尋和排序
• 幾乎支援任何資料來源：DOM， javascript， Ajax 和 伺服器處理
• 支援不同主題 DataTables, jQuery UI, Bootstrap, Foundation
• 各式各樣的擴充套件: Editor, TableTools, FixedColumns ……
• 豐富多樣的option和強大的API
• 支援國際化
• 超過2900+個單元測試

下面是使用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>&nbsp;&nbsp;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;
                }
            });
        }


    });