用dataTable的initComplete实现隐藏表格某些列，翻页后隐藏失效的解决办法

最新推荐文章于 2023-10-27 18:26:58 发布

AmazingBeir

最新推荐文章于 2023-10-27 18:26:58 发布

阅读量932

点赞数

分类专栏：前端开发文章标签：前端 javascript html5

本文链接：https://blog.csdn.net/weixin_44604434/article/details/118965499

版权

前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用dataTable的initComplete实现隐藏表格的某些列，翻页后失效问题解决办法

项目场景：

datatable动态渲染表格实现列隐藏，翻页后隐藏列失效问题，解决办法

问题描述：

（1）用dataTable的initComplete实现隐藏表格的某些列的办法：

function hiddenFields() {
    var showFieldsValue = ['id','name','省略N个字段，写成自己需要的...'];

    var showFieldsVal = $("#showFields").val();
    if (showFieldsVal==null || showFieldsVal==undefined || showFieldsVal=="" || showFieldsVal.indexOf("直接搜索或选择") > -1) {
        showFieldsVal = ['version','peopleId',,'省略N个字段，写成自己需要的...'];
    }
    var hiddenCss = ".id";
    if (showFieldsVal.length>0){
        for (var i=0;i<showFieldsValue.length;i++){
            if (showFieldsVal.indexOf(showFieldsValue[i]) <= -1){
                hiddenCss = "."+showFieldsValue[i];
                $(hiddenCss).css("display","none");
            }
        }
    }
}


$('#demo').DataTable({
        serverSide: true,
        // 是否允许检索
        "searching": false,
        // 是否允许排序
        ordering: false,
        //bSort: true,
        // 是否表示 "processing" 加载中的信息，这个信息可以修改
        "processing": true,
        "language": {
            //此部分代码省略
        },
        //这里的ajax分为两个部分 一个入参为data,callback的函数(有的博客里写的需要setting这个参数，其实没用到),
        //以及获取后台数据的ajax,这个ajax需要用callback方法来重新渲染表格
        "ajax": function (data, callback) {
			//此部分代码省略
        },
        // datatable初始化完成之后执行的方法
        "initComplete": function(settings, json) {
            var data = json.data;
            if (data.length>0){
                hiddenFields();
            }
        }
}

initComplete渲染后的表格会引发两种问题，
问题1，表格二次渲染失效，即点击两次查询，第二次失败，如图。

在这里插入图片描述

问题2，在翻页或重置页码后，隐藏列失效，表格发生错乱，如图。

在这里插入图片描述

原因分析：

initComplete只在第一次生成表格并渲染的时候起效，翻页后失效，要么你就关闭翻页功能（这个适合统计表格，我再另一个统计报表的功能用的这个解决办法）。但像大部分列表都是需要分页查询的，显然不能关闭分页。
想过监控翻页或页码变化，然后再隐藏列。所以一开始试过下面的方法的，但还是不行。。。。。
怀疑是触发翻页或页码后，请求还未返回。

<input type="hidden" id="inputSizeChange" value="false">
<input type="hidden" id="inputPageChange" value="false">

var sleep = function(time) {
    // 延时函数，time 单位ms
    var startTime = new Date().getTime() + parseInt(time, 10);
    while(new Date().getTime() < startTime) {}
};

var sizeChangeInput = document.getElementById("inputSizeChange");
var pageChangeInput = document.getElementById("inputPageChange");
$(document).on("change", "select[name='demo_length']", function(){
    $("#inputSizeChange").focus();
    $("#inputSizeChange").val("true");
    $("#inputSizeChange").blur();
    console.log("test01 select[name='demo_length']: listen "+sizeChangeInput.value);
});
$("#inputSizeChange").bind('blur change', function() {
    console.log("值改变了，改变后为："+$("#inputSizeChange").val());
    //refreshTable();

});
$(document).on("click", "div[id='demo_paginate']", function(){
    pageChangeInput.value="true";
    console.log("test01 div[id='demo_paginate']: listen "+ pageChangeInput.value);
    //refreshTable();
});

解决方案：

（1）问题1解决办法：
在每次重新点击检索提交请求前，即触发$(’#demo’).DataTable({})调用前，先执行以下代码，重置表头信息。

function resetTableHead() {
    $("#detail_table_div").html("<table id=\"demo\" lay-filter=\"test\" class=\"layui-table table table-bordered table-striped display\" width=\"100%\" >\n" +
        "            <thead>\n" +
        "                <tr>\n" +
        "                    <th style=\"width: 60px\">编号</th>\n" +
        "                    <th style=\"width: 60px\">体系</th>\n" +
                             //省略剩余表头信息
        "                </tr>\n" +
        "            </thead>\n" +
        "        </table>");
}

（2）问题2解决办法：
在ajax返回的success方法里，加入渲染完毕后再次隐藏列信息的操作。

$('#demo').DataTable({
        //省略部分代码
        //这里的ajax分为两个部分 一个入参为data,callback的函数(有的博客里写的需要setting这个参数，其实没用到),
        //以及获取后台数据的ajax,这个ajax需要用callback方法来重新渲染表格
        "ajax": function (data, callback) {
            var param = {};
            //省略部分代码
            param.start = data.start;//起始位置
            param.limit = data.length;//一页大小
            param.page = (data.start / data.length) + 1;//当前页码
            $.ajax({
                type: "post",
                url: "dataTableAjaxList",
                timeout: 50000,
                data: param,//这里传的数据一般需要当前页码和一页大小就够了 看后端需求
                dataType: "json",
                success: function (data) {
                    callback(data);//用callback方法重新渲染表格
                    hiddenFields();//渲染完毕后再次隐藏列信息
                }
            });
        },
        "initComplete": 
		//省略部分代码
});

（3）赠送问题及解决办法。。。
如果ajax请求返回的数据是嵌套对象组合，那么展示字段不包括嵌套对象时，页面会报错空指针，解决办法：给全部字段设置默认值。

$('#demo').DataTable({
        //省略部分代码
        "initComplete": //省略部分代码
		,"columnDefs": [
            {
                'targets': "_all"
                ,'defaultContent': ""
            }
            /*,{
                'targets' : [1,2,3,4,5,6,7,8,9,10],//除第一，第九两列外，都默认不排序
                'visible' : false
            }*/
        ]
});