javascript - 如何使用 Jquery 数据表插件隐藏表中的列？

Question

我正在使用 jQuery 数据表插件。

我尝试使用 columnDef 隐藏一些列，但它们仍然出现。

如何使用 columnDef 隐藏某些列？

这是我的代码:

<div id="LabResultDataTableView">  
<table id="TimelineTableTester" class="table table-striped table-bordered">
    <thead class="td-datatable">
        @foreach (var data in Model.ColumnNames)
        {
        <th style="background-color: inherit !important;">@data</th>}
        }
        </thead>
        <tbody>
            @for (int i = 0; i < Model.columnValuesRowWise.Count; i++)
            {                                  
                <tr>
                    @foreach (var col in Model.columnValuesRowWise[i])
                    {
                     <td>@col</td>
                    }
                </tr>
            }
        </tbody>
    </table>
</div>

$(document).ready(function () {
    debugger;    
    ProceduresAndOfficeVisitsDataView = $('#TimelineTableTester').DataTable({
        "bProcessing": true,
        "bDeferRender": true,
        "scrollX": true,
        "bSort": false,
        "stateSave": true,
        "bAutoWidth": true,
        "columnDefs": [
           {
               "targets": [0],
               "visible": false,
           },
           {
               "targets": [11],
               "visible": false,

           },
           {
               "targets": [12],
               "visible": false,
           }]

    });

});

Answer 1

首先你的代码中有语法错误，在 "visible": false 之后有一个额外的 ,。

其次你不需要为每一列单独指定列隐藏逻辑，你可以这样指定

"columnDefs": [
           {
               "targets": [0, 11, 12],
               "visible": false
           }
]

第三件事 "visible": false 可以隐藏列，但如果它没有发生，您可以添加自定义类来隐藏列，如下所示

"columnDefs": [
     {
     "targets": [0, 11, 12],
     "sClass": "dt_col_hide"
   }
]

类定义为

.dt_col_hide{
    display: none;
}

演示: https://jsfiddle.net/Prakash_Thete/qef33kox/