jQuery DataTable 跨页选择及全选

jQuery DataTable 跨页选择及全选，有记忆功能， 终极解决方案 ，调试不容易一天就干了这个，废话不多说直接上代码，总结坏人都是废话太多死的。

第一页

第二页

再回到第一页

先上 HTML 代码

<table id="tabMain" class="table table-striped table-bordered table-hover tablefixed" role="grid" aria-describedby="tabMain_info">
    <thead>
        <tr>
            <th width="80px"><div class="icheck-info" align="center"><input type="checkbox" id="checkAll" onclick="checkboxAllClick('#tabMain',this)" /><label for="checkAll"></label></div></th>
            <th width="130px">日志类型</th>
            <th width="130px">日志级别</th>
            <th>详细信息</th>
            <th width="150px">创建时间</th>
        </tr>
    </thead>
</table>
<input type="hidden" id="ids" />

   接着上Javascript 代码

<script type="text/javascript">
    $(function () {
        var table = $('#tabMain').DataTable({
            stateSave: false,           //刷新不会丢失选项
            autoWidth: false,           //自动宽度
            processing: true,           //加载进度
            serverSide: true,           //服务器分页
            ordering: false,            //列头是否排序
            searching: false,           //是否显示搜索框
            lengthChange: true,
            nfoPostFix:',',
            aLengthMenu: [10, 15, 30, 100],
            dom: 'rt<"bottom"ilp>',
            ajax: {
                type:"post",
                url: '/Log/GetLogList'
            },
            columns: [
                {
                    data: "ID",
                    "render": function (data, type) {
                        return "<div class=\"icheck-info\" align=\"center\"><input type=\"checkbox\" id=\"check" + data + "\"  value=\"" + data + "\" onclick=\"checkboxClick('#tabMain',this,'"+data+"')\"></input><label for=\"check" + data + "\"></label></div>";
                    }
                },
                { data: "LogType" },
                { data: "LogLevel" },           
                { data: "Message"},
                { data: "CreateTime" }
            ]
        });          
        table.on('draw', function ()
        {
            recoveryCheckbox("#tabMain");
        });
    });
    function checkboxClick(tableID, checkbox, value) {
        var ids = $("#ids").val();
        if (checkbox.checked) {
            if (!ids) {
                var id = $("#ids").val() + value + ",";
                $("#ids").val(id);
            }
            else {
                var array = ids.split(',');
                if (array.indexOf(value) > -1) { return; }
                var id = $("#ids").val() + value + ",";
                $("#ids").val(id);
            }
        }
        else {
            if (ids == "") { return; }
            ids = ids.trimEnd(',');
            var array = ids.split(',');
            if (!checkbox.checked && array.length > 0) {
                array.remove(value);
                $("#ids").val(array.join(",") + ",");
            }
        }
        recoveryChekedAll(tableID);
    }
    function checkboxAllClick(tableID, checkbox) {
        var ids = $("#ids").val();
        var array = ids.split(',');
        var $table = $(tableID);
        if (checkbox.checked) {

            $table.find("input[type='checkbox']").each(function () {
                this.checked = true;
                if (array.indexOf(this.value) == -1) {
                    ids = ids + this.value + ",";
                    $("#ids").val(ids);
                }
            });
        }
        else {
            $table.find("input[type='checkbox']").each(function () {
                this.checked = false;
                if (array.indexOf(this.value) > -1) {
                    array.remove(this.value);
                    $("#ids").val(array.join(",") + ",");
                }
            });
        }
    }
    function recoveryCheckbox(tableID) {
        var checkedCount = 0;
        var ids = $("#ids").val();
        if (!ids) return;
        var $checkboxs = $(tableID + " tbody").find("input[type='checkbox']");
        if (!$checkboxs || $checkboxs.length == 0) return;
        var array = ids.split(',');
        $checkboxs.each(function () {
            if (array.indexOf(this.value) > -1) {
                this.checked = true;
                checkedCount++;
            }
        })
        recoveryChekedAll(tableID);
    }
    function recoveryChekedAll(tableID)
    {
        var $table = $(tableID);
        var cbs = $table.find("tbody input:checked");
        var rowCount = $(tableID).DataTable().data().count();
        if (cbs.length == rowCount) {
            var selectAll = $table.find("thead input[type='checkbox']");
            selectAll[0].checked = true;
        }
        else {
            var selectAll = $table.find("thead input[type='checkbox']");
            selectAll[0].checked = false;
        }
    }
</script>

程序里用到的两个通用js函数 

String.prototype.trimEnd = function (c) {
    if (c == null || c == "") {
        var str = this;
        var rg = /s/;
        var i = str.length;
        while (rg.test(str.charAt(--i)));
        return str.slice(0, i + 1);
    }
    else {
        var str = this;
        var rg = new RegExp(c);
        var i = str.length;
        while (rg.test(str.charAt(--i)));
        return str.slice(0, i + 1);
    }
}

Array.prototype.remove = function (val) {
    var index = this.indexOf(val);
    if (index > -1) {
        this.splice(index, 1);
    }
};