JavaScript）HTML<TABLE>に、ソート機能や検索機能を付けるなら、jQueryプラグイン「DataTables」が簡単。

HTML<TABLE>に、ソート機能や検索機能を付けるなら、jQueryプラグイン「DataTables」が簡単で便利。

以下の「Eマウント(AF)単焦点レンズ」一覧に、「DataTables」を使って、ソート機能と検索機能を付けた。

使い方は簡単。まず、スタイルシートとJavaScriptを読み込む。「jQuery」も読み込む。

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/v/dt/dt-1.10.24/datatables.min.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/v/dt/dt-1.10.24/datatables.min.js"></script>

検索文字を色付きでハイライトするなら、「datatables.mark.js」も読み込む。

<script type="text/javascript" src="//cdn.jsdelivr.net/g/mark.js(jquery.mark.min.js),datatables.mark.js"></script>

HTML<TABLE>の列名の行は必ず<thead>で囲む。

<table id="dataTable" class="display" style="width:100%">
<thead>
<tr>・・・・・</tr>
</thead>
<tbody>
・・・・・
</tbody>
</table>

JavaScriptの記述はシンプル。ページングするしない、ソートするしないの選択もできる。

<script type="text/javascript">
$(function() {
	var table = $('#dataTable').DataTable({
		language: {	// 日本語化
			url: "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
		},
		paging: false,	// ページングしない。
		ordering: true,	// ソートする
		mark: true	// 検索文字列ハイライト (by mark.js)
	});
});
</script>

検索文字列ハイライトの色などはCSSで指定できる。

<style>
mark { background: gold; color: black; }
</style>

以上。