JQuery DataTable 插件列可见性答案

【问题标题】：JQuery DataTable plugin column visibilityJQuery DataTable 插件列可见性
【发布时间】：2023-03-29 03:37:01
【问题描述】：

我已经定义了这个 JQuery 数据表：

    APMTable = $(table).DataTable({
        "ajax": {
            "url": AP.APP_ROOT + '/api/'+ AP.WebId + '/' + AP.BillToCompanyKey + '/' + from + '/' + to + '/' + AP.LocaleId + '/' + material,
            "type": "GET"
        },
        columns: [
            { data: "rgNumber" },
            { data: "rgDescription" },
            { data: "rtDescription" },
            { data: "rtNumber" }
        ],
        "responsive": true,
        "order": []
        //"bSort": false
    });

    APMTable.on('xhr.dt',
        function() {
            if (countrycode === 'BR') {
                console.log('SHOW END', countrycode);
                APMTable.column(1).visible(false);
                APMTable.column(2).visible(true);
                APMTable.column(3).visible(true);
            } else {
                console.log('HIDE END', countrycode);
                APMTable.column(1).visible(true);
                APMTable.column(2).visible(false);
                APMTable.column(3).visible(false);
            }
        });

如果国家代码为“BR”，我希望隐藏索引 1 处的列，并显示第 2 列和第 3 列。当然，如果国家代码不是“BR”，反之亦然。

实际发生的情况是，第一次呈现数据表并完成 Ajax 调用时，值“HIDE END GB”被写入控制台，但没有任何列被隐藏。

如果我这样称呼它：

APMTable.ajax.url( '/api/' + AP.WebId + '/' + from + '/' + to + '/' + LocaleId + '/' + material).load();

Ajax 事件侦听器再次触发并隐藏列。

我很困惑，因为 console.log() 语句是在尝试隐藏第一列的同时编写的，但没有任何列被隐藏。在呈现列后，数据表是否触发了我不知道的单独事件？

我需要使用超时来使列第一次隐藏还是发生了其他事情？

【问题讨论】：

我已向事件侦听器添加了 2000 毫秒的超时并将事件更改为“绘制”，并且在等待 2 秒后，在第一次加载时，表格确实隐藏了这些列。任何人都可以建议对此进行改进吗？
你看过datatable dataFilter 选项吗？

标签： javascript jquery ajax datatables

【解决方案1】：

如果在初始化表之前知道countrycode的值，我将重写如下：

APMTable = $(table).DataTable({
    "ajax": {
        "url": AP.APP_ROOT + '/api/'+ AP.WebId + '/' + AP.BillToCompanyKey + '/' + from + '/' + to + '/' + AP.LocaleId + '/' + material,
        "type": "GET"
    },
    columns: [
        { data: "rgNumber" },
        { data: "rgDescription", visible: (countrycode == 'BR' ? false : true ) },
        { data: "rtDescription", visible: (countrycode == 'BR' ? true : false ) },
        { data: "rtNumber", visible: (countrycode == 'BR' ? true : false ) }
    ],
    "responsive": true,
    "order": []
});

【讨论】：