【JQuery】DataTablesでソートをカスタマイズしてみる
おはようございます。
昨日は久しぶりに結構な雨が降りましたね。
出社するだけでずぶ濡れになってしまいました。。
あと1か月もすれば梅雨も明けるでしょうが、早く明けてほしいもんです。
ということで
今日はサクッと JQuery の話し。
以前ちょっと弄った DataTables プラグインで、ソートをカスタマイズしてみました。
スポンサーリンク
プログラム
画面
css/style.css
@charset "UTF-8";
.container {
border: 1px solid black;
padding: 1rem;
margin: 1rem;
}
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>DataTableサンプル</title> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"/> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <div class="container container-fluid"> <table id="myTable" class="table table-striped tagle-bordered"> <thead> <tr> <th>No</th> <th>名前</th> <th>性別</th> <th>年齢</th> <th>種別</th> <th>好物</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>そら</td> <td>♂</td> <td>6</td> <td>01</td> <td>犬の人形</td> </tr> <tr> <td>2</td> <td>りく</td> <td>♂</td> <td>5</td> <td>02</td> <td>人間</td> </tr> <tr> <td>3</td> <td>うみ</td> <td>♀</td> <td>4</td> <td>03</td> <td>高級ウェットフード</td> </tr> <tr> <td>4</td> <td>こうめ</td> <td>♀</td> <td>2</td> <td>04</td> <td>横取りフード</td> </tr> </tbody> <tfoot> <tr> <th>No</th> <th>名前</th> <th>性別</th> <th>年齢</th> <th>種別</th> <th>好物</th> </tr> </tfoot> </table> </div> </body> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script> <script type="text/javascript" src="js/script.js"></script> </html>
スクリプト
js/script.js
$(document).ready( function () {
$('#myTable').DataTable({
'paging' : true,
'pageLength' : 5,
'lengthChange': true,
'searching' : true,
'ordering' : true,
'info' : true,
'autoWidth' : false,
'scrollX' : true,
'scrollY' : true,
'order' : [[ 0, 'asc' ]],
'columnDefs' : [
{ targets: 0, width: 100, 'orderDataType' : 'custom'},
{ targets: 1, width: 100 },
{ targets: 2, width: 100 },
{ targets: 3, width: 100 },
{ targets: 4, width: 100 },
{ targets: 5, width: 100 },
],
"language" : {
"decimal": ".",
"emptyTable": "表示するデータがありません。",
"info": "_START_ ～ _END_ / _TOTAL_ 件中",
"infoEmpty": "0 ～ 0 / 0 件",
"infoFiltered": "(合計 _MAX_ 件からフィルタリングしています)",
"infoPostFix": "",
"thousands": ",",
"lengthMenu": "1ページ _MENU_ 件を表示する",
"loadingRecords": "読み込み中...",
"processing": "処理中...",
"search": "絞り込み:",
"zeroRecords": "一致するデータが見つかりません。",
"paginate": {
"first": "最初",
"last": "最後",
"next": "次",
"previous": "前"
}
}
});
// ソートを好きなようにカスタマイズ
$.fn.dataTable.ext.order['custom'] = function ( settings, col ) {
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
var row = $(td).parent("tr");
var cells = $(row).children("td");
var gender = cells[2].innerText;
var text = td.innerText;
if (gender == "♂") {
return "1" + text
}
return "0" + text;
} );
};
});試しに、♂、♀はそれぞれまとめてソートしてみる。
イメージ
Noで並び替えを実行した際に、性別も判定して並びをカスタマイズ。
まとめ
簡単にカスタマイズできましたね。
応用すると、単純にテキストを表示する列以外（チェックボックスやドロップダウンなど）のソートにも利用できます。
単発ネタですが、何かのお役に立てれば。
ではでは。