DataTable响应式显示某些列 [英] DataTable responsive display certain columns

问题描述

我正在使用 DataTables 和响应，并且在尝试仅显示某些列时遇到问题.

I am using DataTables along with responsive and facing issues while trying to display only certain columns.

表布局是这样的:

我只需要显示'Column 1', 'Column3', 'Column 7', 'Column 8', 'Column 10'并隐藏其他内容(这些应该通过扩展控制显示在每行的末尾).

I need to display to only 'Column 1', 'Column3', 'Column 7', 'Column 8', 'Column 10' and hide others( these should be displayed by expand control at the end of each row ).

JS:

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

这是 JSFiddle .有任何建议！

This is the JSFiddle. Any suggestions!

推荐答案

要在响应数据表中显示特定列，只需添加

To show specific columns in responsive datatable, you just need to add Class Controls in th of table, as follow:

<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": Always display column irrespective of the screen size.

无"类:不显示为列，而是显示在子行中.

class "none": Don't display as a column, but show in the child row.

来源

此处 是其工作示例.

Here is its working demo.

这篇关于DataTable响应式显示某些列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！