数据表显示响应某些列

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。有什么建议么！

Answer 1

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

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

类“所有”：始终不管屏幕尺寸的显示列。

类“无”：不显示为一列，但显示孩子排。

Source

---

Here是其工作演示。

Answer 2

它看起来像你需要this：

列优先权也可以通过对列的标题单元格（例如名字）中的数据优先级的属性来定义。

Answer 3

搜索文档后，我碰到this：

none - Don't display as a column, but show in the child row

这解决了它！