DataTable 带滚动刷新全选全不选

最新推荐文章于 2021-11-30 16:45:19 发布

转载最新推荐文章于 2021-11-30 16:45:19 发布 · 250 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sunBinary/p/11498670.html

文章标签：

#javascript #ViewUI

引入
../../../../media/css/jquery.dataTables.css
../../css/scroller.dataTables.css


https://code.jquery.com/jquery-3.3.1.js
../../../../media/js/jquery.dataTables.js
../../js/dataTables.scroller.js

function getDgBgshTable(){
        sjxmFwTable = $('#sjxmFwTable').DataTable({
            destroy : true,
            serverSide : true,
                        paging : true,
            dom: "frtiS",
            scrollX: true,
            scrollY: 246,
            scroller: {
                loadingIndicator: true
            },
            responsive : true,
            processing : true,
            autoWidth : false,// 自动计算列宽
            deferRender : true,// 设置延迟渲染，提高效率用
            draw : false,
            searching: false, 
            bLengthChange: false,
            order : [ 1, 'asc' ],
            ajax : {
                url : "sjxm2/getSjfw",
                type : "POST",
                data : function(d) {
                    var sentJson = GET_SENT_JSON(d);
                    sentJson.search1 = sjxmglArr[0].sjxmdm;  //sjxmdm
                    sentJson.search2 = $('#text_xmbh').val();//xmbh
                    sentJson.search3 = $('#text_bmbh').val();//bmbh

                    return sentJson;
                },
                error : function(e) {
                    ALERT_ERROR(sjxmFwTable, e);
                },
            },
            lengthMenu : PAGELENGTH,
            "language" : LANGUAGESETTING,
            columnDefs : [
                { "targets": 0 ,"name":"bmbh"   ,"title": " <a><i class='fa fa-circle selectAll_bgdg'></a></i><a><i class='fa fa-circle-o QselectAll_bgdg'></a>", "width": "2%","orderable" : false,},
                { "targets": 1 ,"name":"bmbh" ,"title": "部门编号", "visible": true,"width": "2%", orderable:false,},
                { "targets": 2 ,"name":"bmmc","title": "部门名称" ,"visible": true,"width": "16%"  ,orderable :true ,},
                { "targets": 3 ,"name":"xmbh","title": "项目编号" ,"visible": true,"width": "20%" , orderable :false ,},
                { "targets": 4 ,"name":"xmmc","title": "项目名称" ,"visible": true,"width": "20%" , orderable :false ,},
            ],
            columns: [
                {
                    "sClass": "text-center",
                    "data": "bmbh",
                    "render": function (data, type, row, meta) {
                        return '<input type="checkbox"  class="checkchild_bgdg" value="' + data + '"  name="childBox"/>';
                    },
                },
                {data: 'bmbh'},
                {data: 'bmmc'},
                {data: 'xmbh'},
                {data: 'xmmc'},
            ],
        });
        
        //鼠标移动添加背景颜色
        mouseEvent("sjxmFwTable");
    };
    
    
    var handleCheckbox = function() {
        $(".selectAll_bgdg").click(function () {

            var bgdg_data = $(sjxmFwTable).context[0].aoData; 
            for(var i = 0 ; i < bgdg_data.length ; i++) {
                //判断是否延迟渲染
                if(bgdg_data[i].anCells != null) {
                    //没有勾选的场合
                    if(!bgdg_data[i].anCells[0].firstChild.checked) {
                        bgdg_orderArr.push(bgdg_data[i]._aData);
                    }
                }
            }
            $(".checkchild_bgdg").prop("checked", true);
         });

        $(".QselectAll_bgdg").click(function () {
            
            var bgdg_data = $(sjxmFwTable).context[0].aoData; 
            for(var i = 0 ; i < bgdg_data.length ; i++) {

                //判断是否延迟渲染
                if(bgdg_data[i].anCells != null) {
                    //勾选的场合
                    if(bgdg_data[i].anCells[0].firstChild.checked) {
                        var xmbh = bgdg_data[i]._aData.xmbh;
                        for(var m = 0 ; m < bgdg_orderArr.length ; m++) {
                            if(xmbh == bgdg_orderArr[m].xmbh) {
                                bgdg_orderArr.splice(m, 1);
                            }
                        }
                    }
                }
            }
            $(".checkchild_bgdg").prop("checked", false);
         });
         
        sjxmFwTable.off("click").on( 'click', '.checkchild_bgdg',  function (e) {
            var checked = $(this).is(":checked");
            nRow = $(this).parents('tr')[0];
            var nData = sjxmFwTable.row( nRow ).data();
            if (checked) {
                bgdg_orderArr.push(nData);
            } else {
                var xmbh = nData.xmbh;
                for(var m = 0 ; m < bgdg_orderArr.length ; m++) {
                    if(xmbh == bgdg_orderArr[m].xmbh) {
                        bgdg_orderArr.splice(m, 1);
                    }
                }
            }
        });
    }

列表刷新   sjxmFwTable.ajax.reload();

带滚轴时表头会产生错位，需要刷新
setTimeout(function(){
    sjxmFwTable.ajax.reload();
 },200);

转载于:https://www.cnblogs.com/sunBinary/p/11498670.html