DataTables の使い方3『ソートとサーチオプション』

Java Script

datatables 使い方3 ソート・サーチ

今回は初期の並び順設定と閲覧者によるソート制限、そしてサーチオプションを設定します。

テーブルとコードは前回の DataTables の使い方2 でつくったページ送りのコードを流用します。

 

準備

前回つくったページ送り(ページング)のコードとテーブルをそのまま使います。

datatables のスクリプトとCSSを head 内に設置します。スクリプトは body 最後でも構いませんが、順序には気を付けてください。

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
 <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
サンプルテーブルHTML
コード(ページ送り

初期の並び順

ページロード時の初期の自動ソート設定はorder で行う。列番号は0開始。

オプション デフォルト値
初期の並び順  order “order”: [] 例[[ 列番号, “desc” or “asc” ]] descで降順ascで昇順

基本的な書き方

"order" :[[ 列番号, "desc" or "asc" ]]//descで降順ascで昇順

複数指定

"order": [[ 0, "asc" ], [ 1, "asc" ]]

4列目の出生数を降順にしたければ、4列目は0から数えて3番目にあたり、降順はdescなので “order”: [[ 3, “desc” ]] とします。

利用者によるソート(並べ替え)の禁止

ソート(並べ替え)オプションはデフォルトで全てオンになっているため、ソートして欲しくない列のソートオプションをオフにします。

オプション デフォルト値
利用者による並べ替え許可 orderable true

3列目をソート禁止にしたければ、orderable を false に、target を 2 にします。

"columnDefs": [{ "orderable": false, "targets": 2 }]

複数列を指定したければ “targets”: [2,3] のように書きます。

3列目を降順に、2列目をソート禁止にするコード

<script>
jQuery(function($){
 $.extend( $.fn.dataTable.defaults, {
 language: {
 url: "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
 } 
 }); 
$('#myTable').DataTable({
"paging": "true",//デフォルトでtrueなので、なくてもOK
"pageLength": 7,//初期表示件数
"lengthMenu": [ [7, 10, 15,-1], [7, 10, 15, "全件"]],//表示件数メニュー,
"order": [[ 3, "desc" ]] ,
"columnDefs": [{ "orderable": false, "targets": 2 }]
});
});
</script>

結果

出生率 合計特殊出生率 出生数
1997 9.5 1.39 1191665
1998 9.6 1.38 1203147
1999 9.4 1.34 1177669
2000 9.5 1.36 1190547
2001 9.3 1.33 1170662
2002 9.2 1.32 1153855
2003 8.9 1.29 1123610
2004 8.8 1.29 1110721
2005 8.4 1.26 1062530
2006 8.7 1.32 1092674
2007 8.6 1.34 1089818
2008 8.7 1.37 1091156
2009 8.5 1.37 1070035
2010 8.5 1.39 1071304
2011 8.3 1.39 1050806
2012 8.2 1.41 1037231
2013 8.2 1.43 1029816
2014 8.0 1.42 1003539
2015 8.0 1.45 1005677
2016 7.8 1.44 976978

サーチオプション

サーチオプションを false にすることで、サーチボックスを消すことができます。

オプション デフォルト値
サーチオプション  searching true
<script>
jQuery(function($){
$.extend( $.fn.dataTable.defaults, {
language: {
url: "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
}
});
$('#myTable2').DataTable({
"paging": "true",//デフォルトでtrueなので、なくてもOK
"pageLength": 7,//初期表示件数
"lengthMenu": [ [7, 10, 15,-1], [7, 10, 15, "全件"]],//表示件数メニュー,
"order": [[ 3, "desc" ]] ,//初期並び4列目降順
"columnDefs": [{ "orderable": false, "targets": 2 }],//3列目をソート不可に
"searching": false//サーチ機能オフ
});
});
</script>

“searching”: false にした結果

出生率 合計特殊出生率 出生数
1997 9.5 1.39 1191665
1998 9.6 1.38 1203147
1999 9.4 1.34 1177669
2000 9.5 1.36 1190547
2001 9.3 1.33 1170662
2002 9.2 1.32 1153855
2003 8.9 1.29 1123610
2004 8.8 1.29 1110721
2005 8.4 1.26 1062530
2006 8.7 1.32 1092674
2007 8.6 1.34 1089818
2008 8.7 1.37 1091156
2009 8.5 1.37 1070035
2010 8.5 1.39 1071304
2011 8.3 1.39 1050806
2012 8.2 1.41 1037231
2013 8.2 1.43 1029816
2014 8.0 1.42 1003539
2015 8.0 1.45 1005677
2016 7.8 1.44 976978

補足

サーチオプションを切ると search() が使えなくなるので、検索機能(フィルター)は使いたいけれどボックスだけを消したいなら dom を操作するか、display:none; を使います。

#myTable_filter{display:none;}

テーブルフィルタ名はつけたテーブルID名によって変わります。

関連Datatables の使い方総合