web-dev-qa-db-ja.com

DataTableレスポンシブ表示の特定の列

DataTables を sensitive とともに使用していて、特定の列のみを表示しようとすると問題が発生します。

テーブルのレイアウトは次のようになります： enter image description here

'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 です。助言がありますか！

jquerydatatablesdatatables-1.10
8
Beginner

レスポンシブデータテーブルに特定の列を表示するには、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"：列としては表示せず、子行に表示します。

ソース

ここはその作業デモです。

21
mmushtaq

必要なようです this ：

列の優先度は、列のヘッダーセルのデータ優先度属性によっても定義できます（たとえば、名）。

2
Mick

ドキュメントを検索した後、私は this に出くわしました：

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

これで解決しました！

0
Beginner