DataTables Part5 -Responsive-
前回までに引き続きDataTablesについて。今回はテーブルのレスポンシブWebデザイン化。
これまでの投稿は下記の通り。
単純にレスポンシブ対応させるにはjavascriptに下記の1行を足すだけでよい。
$(document).ready(function(){
$('#example').DataTable( {
/**
* Part1～4で説明済み
*/
dom: '<"top"f>rt<"bottom"lip><"clear">',
lengthMenu: [[10, 50, 100, 500, 9999], [10, 50, 100, 500, "全"]],
language: {
url: "https://cdn.datatables.net/plug-ins/1.10.15/i18n/Japanese.json",
},
stateSave: true,
serverSide: true,
ajax: "datatables_griddata5.php",
orderCellsTop: true,
/**
* レスポンシブWebデザイン
*/
responsive: true,
} );
/**
* Individual column filtering
* 各カラムでインスタント検索を行う
* Part4で説明済み
*/
$('#example').on( 'click', '.search-input-text', function (e) {
e.stopPropagation();
} );
$('#example').on( 'keyup change', '.search-input-text', function (e) {
var i =$(this).attr('data-column'); // getting column index
var v =$(this).val(); // getting search input value
dataTable.columns(i).search(v).draw();
} );
$('#example').on( 'change', '.search-input-select', function (e) {
var i =$(this).attr('data-column'); // getting column index
var v =$(this).val(); // getting search input value
dataTable.columns(i).search(v).draw();
} );
});
ぱっと見た感じうまくいっているように見えたのだが、ここから盛大にはまった。
Part4で紹介した、各カラムごとに検索窓を設置したテーブルに対して適用すると、下記のように検索窓が残ったままになってしまう問題が発生。見直しても特に間違った記述をしているようにも思えない。
いろいろ調べてみると、どうもResponsiveのバージョン2.0以降で起こっている様子。最近リリースされた2.2.0でも変わりない。
[参考]
Complex headers & Responsive Not working anymore
“Complex Header” not responsive in current DataTables.net build?
Multiple header rows – Issue #71
上記を見ると開発者も認識しているようだが、今は別の機能を作るのに手を取られて直していないようなことが書かれていた。原因としては、現行バージョンが複数行にわたるテーブルヘッダに対応していないとのこと。
解決方法としては、バージョン1.xに戻すかいろんな所で書かれている有志による修正案を試す、もしくは修正されるまで待つぐらいしか方法はない。いくつか修正案を試したが私の環境ではうまくいかなかった。
というわけでテーブルヘッダを1行にし、検索窓をテーブルフッタに設置したところ、下記のようにうまく動いた。
<table id="example" class="display nowrap" width="100%" cellspacing="0">
<thead>
<tr>
<th data-priority="1">CountryCode</th>
<th data-priority="2">Language</th>
<th data-priority="4">IsOfficial</th>
<th data-priority="3">Percentage</th>
</tr>
</thead>
<tfoot>
<tr>
<td>
<input type="text" data-column="0" class="search-input-text" placeholder="">
</td>
<td>
<input type="text" data-column="1" class="search-input-text" placeholder="">
</td>
<td>
<select data-column="2" class="search-input-select">
<option value="">All</option>
<option value="1">T</option>
<option value="2">F</option>
</select>
</td>
<td>
<input type="text" data-column="3" class="search-input-text" placeholder="">
</td>
</tr>
</tfoot>
</table>
とりあえず修正されることを待つが、テーブルヘッダを複数行にしてうまく動いたという方がいれば教えてください。