根据响应数据的某些条件隐藏jQuery Datatable中的特定列答案

【问题标题】：Hide specific columns in jQuery Datatable according to some condition on response data根据响应数据的某些条件隐藏jQuery Datatable中的特定列
【发布时间】：2018-05-18 12:36:16
【问题描述】：

我有下面的代码，我想根据城市数据隐藏某些列。我使用了回调函数，但它破坏了表格。如果我更改其中的某些内容，它也会出错。

var hide_col = $('#table_id').dataTable().api();
var table = $('#table_id');
var oTable = table.dataTable({
    "destroy": true,
    "processing": true,
    "serverSide": true,
    "ajax": "/app/get-data/"+val1+'/'+val2+'/'+val3+'/',
    "searching": false,
    "ordering": true,
    "paging": true,
    "columnDefs": [
        {"targets": 1, "orderable": false},{"targets": 2, "orderable": false},
        {"targets": 3, "orderable": false},{"targets": 4, "orderable": false},
        {"targets": 5, "orderable": false},{"targets": 6, "orderable": false},
        {"targets": 7, "orderable": false},{"targets": 8, "orderable": false},
        {"targets": 9, "orderable": false},{"targets": 10, "orderable": false},
        {"targets": 11, "orderable": false},{"targets": 12, "orderable": false},
        {"targets": 13, "orderable": false},{"targets": 14, "orderable": false},
        {"targets": 15, "orderable": false},{"targets": 16, "orderable": false},
        {"targets": 17, "orderable": false},{"targets": 18, "orderable": false},
        {"targets": 19, "orderable": false},{"targets": 20, "orderable": false},
        {"targets": 21, "orderable": false},{"targets": 22, "orderable": false},
        {"targets": 23, "orderable": false},{"targets": 24, "orderable": false},

        {"width": "200%", className: "dt-left", "targets": 0}
    ],

    buttons: [{ extend: 'print',
         className: 'btn dark btn-outline' },
        { extend: 'copy',
          className: 'btn red btn-outline' },
        { extend:'pdf',
          orientation:'landscape',
          className: 'btn green btn-outline',
          exportOptions: {
            columns: [0,1,2,3,4,5,6,7,8,9,10,11,12] }},
        { extend: 'excel',
          className: 'btn yellow btn-outline' },
        { extend: 'csv',
          className: 'btn purple btn-outline' },
        { extend: 'colvis',
          className: 'btn dark btn-outline',
          text: 'Columns' }
    ],
    // setup responsive extension: http://datatables.net/extensions/responsive/
    responsive: false,

    "order": [
        [0, 'asc']
    ],

    "lengthMenu": [
        [10, 20, 50, 100],
        [10, 20, 50, 100]  // change per page values here] // change per page values here
    ],
    // set the initial value
    "pageLength": 10,

    "initComplete": function(settings, json) {            
        if (settings.jqXHR.responseJSON.city == 'A'){
            hide_col.columns([6,7,8,12,16,17,18,19,20]).visible(false);
            hide_col.columns([9,10,11,13,14,15,21,22,23,24]).visible(true);
        }
        else if (settings.jqXHR.responseJSON.city == 'B'){
            hide_col.columns([9,10,11,13,14,15,21,22,23,24]).visible(false);
            hide_col.columns([6,7,8,12,16,17,18,19,20]).visible(true);
        }
    }
});

我也在使用一个回调，但似乎我做错了什么。请帮忙。谢谢。

【问题讨论】：

你说的“但它破坏了餐桌”是什么意思？
我同意，我认为@Luffy 需要为我们提供更多信息才能真正帮助您。您可以在 columnDefs 中设置列的可见性，设置为可见性：true/false，但不清楚您的条件是什么。
看，我调用了一个 ajax，它给了我一个城市和一个列表作为响应。因此，假设我得到城市“A”的响应，那么我将显示 30 列中的 15 列，其余列将隐藏。城市“B”也是如此。我需要隐藏和显示的列在回调“initComplete”中给出。就是这样，这就是我想做的。
然后向我们展示您在 Ajax 请求中尝试过的操作

标签： jquery html datatables

【解决方案1】：

我可以看到您在实际初始化之前尝试访问Datatables API。事实上，我相信你可以完全摆脱 hide_col 变量并使用 oTable 变量调用 columns().visible()。

所以删除这一行：

var hide_col = $('#table_id').dataTable().api();

并将此函数更改为使用oTable 而不是hide_col：

"initComplete": function(settings, json) {            
    if (settings.jqXHR.responseJSON.city == 'A'){
        oTable.columns([6,7,8,12,16,17,18,19,20]).visible(false);
        oTable.columns([9,10,11,13,14,15,21,22,23,24]).visible(true);
    }
    else if (settings.jqXHR.responseJSON.city == 'B'){
        oTable.columns([9,10,11,13,14,15,21,22,23,24]).visible(false);
        oTable.columns([6,7,8,12,16,17,18,19,20]).visible(true);
    }
}

【讨论】：