求助：根据响应数据条件隐藏jQuery DataTable指定列

我看了你的代码，发现几个关键问题导致表格显示异常和报错，咱们一步步来解决：

问题分析 #

• 重复实例化导致API对象失效：你提前创建了hide_col指向旧的DataTable实例，但之后用destroy: true销毁了旧实例并重新初始化，这时候hide_col已经是无效的旧实例，操作它自然会出问题。
• 错误的响应数据获取方式：在initComplete里用settings.jqXHR.responseJSON不够可靠，其实回调函数的第二个参数json已经是解析后的响应数据，直接用它更安全。
• 代码结构冗余：重复的table.dataTable()调用会造成实例混乱；另外原代码里width: "200%"的设置明显不合理，会直接打乱表格布局。

修复后的代码 #

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": "20%", 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'}
    ],
    responsive: false,
    "order": [[0, 'asc']],
    "lengthMenu": [[10, 20, 50, 100], [10, 20, 50, 100]],
    "pageLength": 10,
    "initComplete": function (settings, json) {
        // 获取当前表格的有效API实例
        var hide_col = this.api();
        // 直接使用回调返回的json数据判断城市
        if (json.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 (json.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);
        }
    }
});

关键修复点说明 #

1. 获取正确的API实例：不再提前定义hide_col，而是在initComplete里通过this.api()获取当前初始化完成的表格API实例，确保操作的是最新、有效的表格对象。
2. 安全获取响应数据：使用initComplete自带的json参数直接访问返回的城市信息，避免依赖settings.jqXHR可能带来的兼容性或数据解析问题。
3. 修正布局问题：把不合理的200%列宽改成了20%，你可以根据实际需求调整这个数值，但过大的宽度会直接导致表格布局错乱。
4. 精简冗余代码：移除了重复的表格实例化代码，让逻辑更清晰。

这样修改后，应该就能正常根据城市信息隐藏指定列，不会再出现显示异常和报错了。

内容的提问来源于stack exchange，提问作者Luffy