JQuery DataTable插件列可见性

时间:2017-03-24 12:00:55

标签: javascript jquery ajax datatables

我定义了这个JQuery DataTable:

    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);
            }
        });

我希望索引1处的列隐藏,第2列和第3列显示国家/地区代码是否为' BR'。反之亦然,如果国家代码不是' BR'当然。

实际上发生的事情是第一次呈现数据表并且Ajax调用完成时,值' HIDE END GB'被写入控制台,但没有一列被隐藏。

如果我再说这个:

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

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

我感到困惑,因为在尝试第一次列隐藏的同时编写了console.log()语句,但没有列被隐藏。数据表是否是在渲染列后我不知道的单独事件?

我是否需要使用超时来使列首次隐藏或是否还有其他内容?

1 个答案:

答案 0 :(得分:0)

如果在初始化表之前已知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": []
});