Question

我希望有一个显示几列的DataTable，然后显示下面其他未见列的数据（通过单击行开头的加号）。但是，当窗口宽度足够小以迫使表中已显示的列移出时，我只能看到“+”符号。

有一个小提琴，其中包含我遇到的问题样本：https://jsfiddle.net/ryanoc/ebRXw/

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

我希望让桌子响应就行了，没有运气。

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

Answer 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 ...

Answer 2

我一直坚持如何手动强制隐藏某些列，同时始终显示＆＃34; +＆＃34;标志，任何帮助将不胜感激。

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

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

这是 Working Fiddle

jQuery DataTables列隐藏

2 个答案: