CheckBox点击全选和反选，基于datatable

CheckBox多选，全选等操作很多地方都会用到

下面例子基于datatable下的CheckBox全选和反选操作 （jquery实现）

 HTML代码

<div class="table-responsive">
    <table class="table  table-bordered table-hover " id="oTable">
        <thead>
        <tr>
            <th  style="text-align: center"><input type="checkbox" id="allCheck" class="select-checkbox"></th>
            <th>年份</th>
            <th>季度</th>
            <th>姓名</th>
            <th>考核结果</th>
            <th>创建人</th>
            <th>创建日期</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
    </table>

JQ代码

 var oTable;
        var page = 1;
        var allCheckPage = [];
        var selectIdArr = [];
      
        $(function () {
            var num = 0;
            oTable = $("#oTable").on('draw.dt', function () {
                oTable.rows(function (idx, data, node) {
                    return ($.inArray(data["id"], selectIdArr) != -1) ? true : false;
                }).select();
            }).DataTable({
                keys: true,
                bLengthChange: false,//去除每页条数
                pagingType: "full_numbers",  //分页样式：simple,simple_numbers,full,full_numbers
                ordering: true,//取消默认排序查询,否则复选框一列会出现小箭头
                serverSide: true,//启用服务器端分页
                processing: true,//隐藏加载提示,自行处理
                bPaginate: true,
                searching: false, //禁用原生搜索
                language: initDateTableLang(), //提示信息
                order: [[6, "desc"]],
                autoWidth: false, //禁用自动调整列宽
                stripeClasses: ["odd", "even"], //为奇偶行加上样式，兼容不支持CSS伪类的场合
                select: {
                    style: 'multi',//multi
                    selector: 'td:first-child',
                    info: false
                },
                "ajax": {
                    "url": "table表格的后台数据请求地址",
                    "type": "POST",
                    "dataSrc": "data",
                    "data": function (d) {
                        //添加额外的参数传给服务器
                        d.extra_search = $("#dataFrom").serialize();
                    }
                },
                aoColumnDefs: [{"bSortable": false, "aTargets": [0,2, 3, 4, 8]},{'className': 'select-checkbox', targets: 0}],
                //列表表头字段
                columns: [
                    {
                        "sWidth": "5%",
                        "render": function (data, type, row, meta) {
                            if(row.checkStatus!="1"){
                                num++;
                            }
                            if (num==0){
                                $("#allCheck").attr("disabled",true);
                            }else{
                                $("#allCheck").attr("disabled",false);
                            }
                            return '';
                        }
                    },
                    {"data": "year","render":showTitle},
                    {"data": "quarter","render":quarterValue},
                    {"data": "name"},
                    {"data": "inspectResultValue"},
                    {"data": "createStaffName"},
                    {"data": "createTime","render":operateDate},
                    {"data": "checkStatus","render":operateCheckStatus},
                    {"data": "id", "render": operateStr}
                ],
               /*
               全选和反选无关代码
                "rowCallback": function (row, data) {
                    if (data.checkStatus == '1') {
                        // debugger
                        $(row).click(function (e) {
                            setTimeout(function () {
                                $(row).removeClass('selected');
                            },0)
                        });
                    }
                }
               
               */
            });
            var deselectNode = function (node) {
                selectIdArr = selectIdArr.remove(node["id"]);
                if ($("#allCheck").prop('checked')) {
                    $("#allCheck").removeAttr("checked");//取消全选
                    allCheckPage = allCheckPage.remove(page);
                }
            }
            $("#allCheck").change(function () {
                isAllCheck();
            });


            oTable.on('select', function (e, dt, type, indexes) {

                if ($("#oTable").find(".selected").length == num) {
                    $("#allCheck").prop("checked", true);
                }
                if (type === 'row') {
                    var nodes = oTable.rows(indexes).data();
                    for (var i = 0; i < nodes.length; i++) {
                        var node = nodes[i];
                        selectNode(node);
                    }
                }

            });

            oTable.on('deselect', function (e, dt, type, indexes) {
                if (type === 'row') {
                    var nodes = oTable.rows(indexes).data();
                    for (var i = 0; i < nodes.length; i++) {
                        var node = nodes[i];
                        deselectNode(node)
                    }
                }
            });

            var selectNode = function (node, isInitData) {
                var flag = $.inArray(node["id"], selectIdArr);
                if (flag == -1) {
                    selectIdArr.push(node["id"]);
                    if (isInitData != undefined && isInitData == true) {
                        t.rows(function (idx, data, node) {
                            return data["id"] === node["id"] ? true : false;
                        }).select();
                    }
                }
            }

            oTable.on('page.dt', function () {
                var info = oTable.page.info();
                page = info["page"] + 1;
                num =0;
                if ($.inArray(page, allCheckPage) != -1) {
                    $("#allCheck").prop("checked", true);
                } else {
                    if ($("#allCheck").prop('checked')) {
                        $("#allCheck").removeAttr("checked");//取消全选
                    }
                }
            });
        });
        
        
        
        
        
        
        
        function isAllCheck() {
            if ($("#allCheck").prop('checked')) {
                $.each(oTable.rows()[0],function(index,value){
                    if(oTable.rows(index).data()[0].checkStatus!='1'){
                        oTable.rows(index).select();
                        allCheckPage.push(page);
                    }
                });
            } else {
                oTable.rows().deselect();
            }
        }

实现结果

标签： CheckBox