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

2018年4月3日2018年8月5日Java Script

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

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

準備

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

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>

<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>

<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開始。

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

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

複数指定

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

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

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

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

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>

結果

サーチオプション

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

<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 にした結果

補足

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

#myTable_filter{display:none;}

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

関連Datatables の使い方総合