数据表格响应式显示特定列

Question

我正在使用 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。有什么建议吗！

- Beginner

Answer 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": 不以列形式显示，但在子行中显示。

源代码

---

这里 是它的演示。

- mmushtaq

Answer 2

看起来你需要 这个：

列的优先级也可以通过列标题单元格上的 data-priority 属性进行定义（例如，名字列）。

- Mick