如何使用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, 
      }] 

    }); 

});

来源

2016-09-21 rajiv

更加明确的措辞。 – Prune

我的答案是否解决了您的问题？ –

感谢您的仁慈帮助 – rajiv

那么第一件事情，有"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/

来源

2016-09-21 16:11:03

我认为在目标中定义列是一个很好的方法。您甚至可以根据需要更改列的顺序，只需更改目标数组中的顺序即可。 – Vatsal

如果我的答案解决了您的问题，那么您可以通过点击绿色的勾号来接受它。 –

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

回答

相关问题