jQuery DataTables 列隐藏答案

【问题标题】：jQuery DataTables Column HidingjQuery DataTables 列隐藏
【发布时间】：2016-11-28 23:16:37
【问题描述】：

我想要一个显示几列的 DataTable，然后显示下面其他看不见的列的数据（通过单击行开头的加号）。但是，只有当窗口宽度小到可以强制将表格中已经显示的列移开时，我才能看到“+”号。

有一个小提琴包含我遇到的问题的示例：https://jsfiddle.net/ryanoc/ebRXw/

    $(document).ready(function() {
    $('#example').DataTable( {
        responsive: true
    } );
   } );

我希望让表格响应式可以解决问题，但没有运气。

第 3 列被“隐藏”，但没有“+”号，直到您减小表格的宽度足以要求将列移出表格。我被困在如何手动强制隐藏某些列，同时始终显示“+”号，我们将不胜感激。

【问题讨论】：

标签： jquery datatables responsive

【解决方案1】：

将class="none" 添加到th 似乎可以满足您的需要：

<thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th class="none">Office</th>
        <th>Age</th>
        <th class="none">Start date</th>
        <th>Salary</th>
    </tr>
</thead>

我还在表格中添加了 display responsive nowrap 类：

<table id="example" class="display responsive nowrap" cellspacing="0" width="100%">

工作示例here 根据您的数据，我已经删除了 CSS...

【讨论】：

谢谢！我确定我错过了一些简单的东西..对此仍然相对较新

【解决方案2】：

我不知道如何手动强制隐藏某些列，同时始终显示“+”号，如果有任何帮助，我们将不胜感激。

所以要强制插件默认显示加号图标，您可以在应用 dataTables 插件后将 collapsed 类添加到表中。

 $('#example').addClass('collapsed');

这是一个Working Fiddle

【讨论】：