日々見つけた細かいTipsを書き留めておくようにするのがよいだろう。
jQuery Datatablesは、とりあえずエイヤでテーブル状のデータを表示するときにあまり考え込まずにページネーションやソートなど細かい機能を手軽に入れられるJavaScriptツールだ。テーブル表示にtableタグを使うのが今風でなくなってきているが、取り急ぎ機能を入れたりモックアップを起こすときには便利である。ただ、検索絞り込みのときに、日本語でよく必要になるカタカナひらがな無視検索（絞り込み）がないので、そのあたりを拡張する案の一つを。
このあたりを参考に検索拡張部分で、比較をひらがなカタカナ統一してしまうみたいな方法が考え込まずに楽だった。
文字変換には moji.js を使ってみる感じ。
javascript
<script src="moji.js"></script>
<script>
$(document).ready(function () {
$('#customkeyword').keyup(function () {
$('#table').DataTable().draw();
});
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var key = moji($('#customkeyword').val().trim()).convert("HGtoKK").convert("ZEtoHE").toString().toUpperCase();
if (key == '') {
return true;
}
for (var i = 0; i < data.length; i++) {
var dt = moji(data\[i\].trim()).convert("HGtoKK").convert("ZEtoHE").toString().toUpperCase();
if (dt.indexOf(key) != -1) {
return true;
}
}
return false;
}
);
});
</script><script src="moji.js"></script>
<script>
$(document).ready(function () {
$('#customkeyword').keyup(function () {
$('#table').DataTable().draw();
});
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var key = moji($('#customkeyword').val().trim()).convert("HGtoKK").convert("ZEtoHE").toString().toUpperCase();
if (key == '') {
return true;
}
for (var i = 0; i < data.length; i++) {
var dt = moji(data\[i\].trim()).convert("HGtoKK").convert("ZEtoHE").toString().toUpperCase();
if (dt.indexOf(key) != -1) {
return true;
}
}
return false;
}
);
});
</script>あと#customkeywordのテキストボックスを作って、DataTable側の定義DOMで標準テキストボックスを消すと見栄えが少しはマシになるかも。
$('#table').DataTable({ ・・・ "dom": "lrtip", ・・・ });