2016-11-28 13 views
0

いくつかの列を表示するDataTableを作成し、その下にある他の見えない列のデータを(行の先頭にあるプラス記号をクリックして)表示します。しかし、ウィンドウの幅が十分小さいので、すでにテーブルに表示されている列を強制的にオフに移動させるには、「+」記号しか表示できませんでした。jQuery DataTables Column Hiding

私がいる問題のサンプルが含まれているフィドルがあります:https://jsfiddle.net/ryanoc/ebRXw/

$(document).ready(function() { 
    $('#example').DataTable({ 
     responsive: true 
    }); 
    }); 

私はテーブルが応答することはありません運で、トリックを行うだろうと期待しました。

3番目の列は「非表示」ですが、テーブルから列を移動するのに十分なテーブルの幅を減らすまで「+」記号はありません。私はいつも "+"記号を表示している間、手動で特定の列を非表示にする方法に固執しています。

<thead> 
    <tr> 
     <th>Name</th> 
     <th>Position</th> 
     <th class="none">Office</th> 
     <th>Age</th> 
     <th class="none">Start date</th> 
     <th>Salary</th> 
    </tr> 
</thead> 

は、私は、テーブルにdisplay responsive nowrapクラスを追加しました::

答えて

2

thからclass="none"はあなたが必要なものをやっているようだ追加

<table id="example" class="display responsive nowrap" cellspacing="0" width="100%"> 

あなたのデータに基づい例here作業、私はCSSを削除しました...

+0

ありがとうです!私は何かシンプルなものが欠けていたと確信していました。 – nkbved

0

私は立ち往生しています手動で特定の列を非表示にする方法、 "+"記号を常に表示する方法などがあります。

デフォルトでプラグインにプラスアイコンが表示されるようにするには、dataTablesプラグインを適用した後にテーブルにcollapsedクラスを追加します。ここ

$('#example').addClass('collapsed'); 

Working Fiddle