【JQuery】DataTablesでソートをカスタマイズしてみる

2019年6月25日Javascript,開発

おはようございます。

昨日は久しぶりに結構な雨が降りましたね。
出社するだけでずぶ濡れになってしまいました。。

あと1か月もすれば梅雨も明けるでしょうが、早く明けてほしいもんです。

ということで
今日はサクッと JQuery の話し。

以前ちょっと弄った DataTables プラグインで、ソートをカスタマイズしてみました。

1. プログラム
- 1.1. 画面
- 1.2. スクリプト
2. イメージ
3. まとめ

プログラム

画面

css/style.css

@charset "UTF-8";

.container {
	border: 1px solid black;
	padding: 1rem;
	margin: 1rem;
}

@charset "UTF-8";

.container {

border:1pxsolidblack;

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>

<!DOCTYPE html>

<head>

<title>DataTableサンプル</title>

</head>

<body>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>高級ウェットフード</td>

</tr>

<tr>

<td>横取りフード</td>

</tr>

</tbody>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

</div>

</body>

</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;
	    } );
	};
});

$(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){

returnthis.api().column(col,{order:'index'}).nodes().map(function(td,i){

varrow=$(td).parent("tr");

varcells=$(row).children("td");

vargender=cells[2].innerText;

vartext=td.innerText;

if(gender=="♂"){

return"1"+text

}

return"0"+text;

});

};

});

試しに、♂、♀はそれぞれまとめてソートしてみる。

イメージ

Noで並び替えを実行した際に、性別も判定して並びをカスタマイズ。

まとめ

簡単にカスタマイズできましたね。

応用すると、単純にテキストを表示する列以外（チェックボックスやドロップダウンなど）のソートにも利用できます。

単発ネタですが、何かのお役に立てれば。

ではでは。

2019年6月25日Javascript,開発DataTables,JQuery,JQueryプラグイン

Posted by doradora