DataTable 响应式显示某些列

Posted 2023-05-07

技术标签:

【中文标题】DataTable 响应式显示某些列【英文标题】：DataTable responsive display certain columns 【发布时间】：2017-09-02 13:44:20 【问题描述】：

我正在使用 DataTables 和 responsive 并在尝试仅显示某些列时遇到问题。

表格布局是这样的：

我只需要显示'Column 1', 'Column3', 'Column 7', 'Column 8', 'Column 10'并隐藏其他人（这些应该通过每行末尾的展开控件显示）。

JS：

  $( 'table' ).DataTable( 
      order: [ [ 0, "asc" ] ],
        responsive: 
            details: 
                type: 'column',
                target: 'tr'
            
        ,
        columnDefs: [ 
            className: 'control',
            orderable: false,
            targets: -1
         ]
     );

这是JSFiddle。有什么建议！

【问题讨论】：

【参考方案1】：

要在响应式数据表中显示特定列，只需在表的th 中添加Class Controls，如下：

<table class="table table-hover table-striped">
  <thead>
    <tr>
      <th class="all">Column 1</th>
      <th class="none">Column 2</th>
      <th class="all">Column 3</th>
      <th class="none">Column 4</th>
      <th class="none">Column 5</th>
      <th class="none">Column 6</th>
      <th class="all">Column 7</th>
      <th class="all">Column 8</th>
      <th class="none">Column 9</th>
      <th class="all">Column 10</th>
      <th class="none">Column 11</th>
      <th class="all"></th>
    </tr>
  </thead>

class "all"：无论屏幕大小如何，始终显示列。

class "none"：不显示为列，而是显示在子行中。

Source

Here 是它的工作演示。

【讨论】：

【参考方案2】：

看来你需要this: