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
<table id="myTable">
<thead>
<tr>
<th>年</th>
<th>出生率</th>
<th>合計特殊出生率</th>
<th>出生数</th>
</tr>
</thead>
<tbody>
<tr>
<td>1997</td>
<td>9.5</td>
<td>1.39</td>
<td>1191665</td>
</tr>
<tr>
<td>1998</td>
<td>9.6</td>
<td>1.38</td>
<td>1203147</td>
</tr>
<tr>
<td>1999</td>
<td>9.4</td>
<td>1.34</td>
<td>1177669</td>
</tr>
<tr>
<td>2000</td>
<td>9.5</td>
<td>1.36</td>
<td>1190547</td>
</tr>
<tr>
<td>2001</td>
<td>9.3</td>
<td>1.33</td>
<td>1170662</td>
</tr>
<tr>
<td>2002</td>
<td>9.2</td>
<td>1.32</td>
<td>1153855</td>
</tr>
<tr>
<td>2003</td>
<td>8.9</td>
<td>1.29</td>
<td>1123610</td>
</tr>
<tr>
<td>2004</td>
<td>8.8</td>
<td>1.29</td>
<td>1110721</td>
</tr>
<tr>
<td>2005</td>
<td>8.4</td>
<td>1.26</td>
<td>1062530</td>
</tr>
<tr>
<td>2006</td>
<td>8.7</td>
<td>1.32</td>
<td>1092674</td>
</tr>
<tr>
<td>2007</td>
<td>8.6</td>
<td>1.34</td>
<td>1089818</td>
</tr>
<tr>
<td>2008</td>
<td>8.7</td>
<td>1.37</td>
<td>1091156</td>
</tr>
<tr>
<td>2009</td>
<td>8.5</td>
<td>1.37</td>
<td>1070035</td>
</tr>
<tr>
<td>2010</td>
<td>8.5</td>
<td>1.39</td>
<td>1071304</td>
</tr>
<tr>
<td>2011</td>
<td>8.3</td>
<td>1.39</td>
<td>1050806</td>
</tr>
<tr>
<td>2012</td>
<td>8.2</td>
<td>1.41</td>
<td>1037231</td>
</tr>
<tr>
<td>2013</td>
<td>8.2</td>
<td>1.43</td>
<td>1029816</td>
</tr>
<tr>
<td>2014</td>
<td>8.0</td>
<td>1.42</td>
<td>1003539</td>
</tr>
<tr>
<td>2015</td>
<td>8.0</td>
<td>1.45</td>
<td>1005677</td>
</tr>
<tr>
<td>2016</td>
<td>7.8</td>
<td>1.44</td>
<td>976978</td>
</tr>
</tbody>
</table>

もっと大きな表で試したいならこちらからコピペして、テーブル id を変更して使ってください。

コード(ページ送り
<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, "全件"]],//表示件数メニュー
});
});
</script>

初期の並び順

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

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

並べ替えしたくないのなら、”aaSorting”:[]を使います。
基本的な書き方

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

複数指定

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

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

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

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

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

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>

結果

出生率合計特殊出生率出生数
19979.51.391191665
19989.61.381203147
19999.41.341177669
20009.51.361190547
20019.31.331170662
20029.21.321153855
20038.91.291123610
20048.81.291110721
20058.41.261062530
20068.71.321092674
20078.61.341089818
20088.71.371091156
20098.51.371070035
20108.51.391071304
20118.31.391050806
20128.21.411037231
20138.21.431029816
20148.01.421003539
20158.01.451005677
20167.81.44976978

サーチオプション

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

オプションデフォルト値
サーチオプション searchingtrue
<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 にした結果

出生率合計特殊出生率出生数
19979.51.391191665
19989.61.381203147
19999.41.341177669
20009.51.361190547
20019.31.331170662
20029.21.321153855
20038.91.291123610
20048.81.291110721
20058.41.261062530
20068.71.321092674
20078.61.341089818
20088.71.371091156
20098.51.371070035
20108.51.391071304
20118.31.391050806
20128.21.411037231
20138.21.431029816
20148.01.421003539
20158.01.451005677
20167.81.44976978

補足

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

#myTable_filter{display:none;}

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

関連Datatables の使い方総合