ソートできるデータテーブル (3)

DataTables (table plug-in for jQuery) DataTables

第3弾 データをソートではなくセレクトボックスで抽出する


データが増えるとソートでも抽出しても、AかZしか見当たらないことに
これを使えばデータの値をセレクトボックスから抽出できるようになります。




example - Individual column searching

サンプルがわかりやすいので問題ないでしょう。
DataTables (table plug-in for jQuery) DataTables is a plug-in for the jQuery Javascript library.
http://www.datatables.net/
DataTables example - Individual column searching (select inputs)
http://www.datatables.net/examples/api/multi_filter_select.html
サイトのサンプルではfooter部分ですが、headerにしてます。



年 月 タグ タイトル
2014 12 映画 12-12-12／ニューヨーク
2014 03 映画 スキャナー ダークリー
2014 01 映画 オジーから始まった旅
2014 01 映画 エネミー・オブ・アメリカ
2011 11 映画 PIRATES of SILICON VALLEY
2014 11 サイト Udemyが日本語メニューに
2014 02 サイト クックパッド言えばレシピ
2013 12 サイト Color Test
2015 02 Structured breadcrumbはリッチじゃない

code
$(document).ready(function() {
$('#example').DataTable( {
initComplete: function() {
this.api().columns().every( function() {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo($(column.header()).empty())
.on('change', function() {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);

column
.search(val ? '^'+val+'$' : '', true, false)
.draw();
});

column.data().unique().sort().each(function(d, j){
select.append('<option value="'+d+'">'+d+'</option>')
});
});
},

//ここから設定
"bFilter": true, //検索BOX
"bPaginate": true, //ページ送り
"bInfo": true, //データ数
"bSort": true, //ソートさせる
"lengthMenu": [10, 20, 40, 60],

"oLanguage": {
"sLengthMenu": "表示件数: _MENU_ 件",
"sSearch": "絞り込み:",
"sEmptyTable": "対象がありませんでした。",
"sLoadingRecords": "Loading...",
"sInfo": "登録数 _TOTAL_ entries to show (_START_ to _END_)",
"sZeroRecords": "対象がありませんでした。",
"sInfoEmpty": "Showing 0 to 0 of 0 entries",
"sInfoFiltered": "(filtered from _MAX_ total entries)",
"oPaginate": {
"sFirst": "First",
"sPrevious": "前のページ",
"sNext": "次のページ",
"sLast": "Last"       
}
},
});
});