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/

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

1 个答案: