DataTable响应显示某些列

Question

在尝试仅显示某些列时,我正在使用DataTables以及响应和面临的问题.

表格布局是这样的:

我需要只显示'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>

class"all":无论屏幕大小如何,始终显示列.

class"none":不显示为列,而是显示在子行中.

资源

这是它的工作演示.