DataTablesは初期状態だと、検索欄やページネーションなどのUIが英語で表示されます。
日本語の画面に組み込むなら、language設定で文言をそろえておくと違和感が出にくくなります。この記事では、1画面だけで使う設定と、複数テーブルで使い回す設定を整理します。
公式ページ
languageオプションで日本語化する
DataTablesの表示文言は、初期化時のlanguageオプションで変更できます。
<table id="myTable" class="display">
<thead>
<tr>
<th>名前</th>
<th>年齢</th>
<th>都市</th>
</tr>
</thead>
<tbody>
<tr>
<td>山田 太郎</td>
<td>30</td>
<td>東京</td>
</tr>
<tr>
<td>佐藤 花子</td>
<td>25</td>
<td>大阪</td>
</tr>
<tr>
<td>鈴木 一郎</td>
<td>35</td>
<td>福岡</td>
</tr>
</tbody>
</table>
<script>
new DataTable('#myTable', {
language: {
search: '検索:',
lengthMenu: '_MENU_件ずつ表示',
info: '_TOTAL_件中 _START_ から _END_ まで表示',
infoEmpty: '0件中 0 から 0 まで表示',
infoFiltered: '（全 _MAX_ 件から絞り込み）',
zeroRecords: '一致するデータがありません',
emptyTable: 'テーブルにデータがありません',
loadingRecords: '読み込み中...',
processing: '処理中...',
paginate: {
first: '先頭',
previous: '前へ',
next: '次へ',
last: '最後'
},
aria: {
orderable: 'この列で並び替え',
orderableReverse: 'この列を逆順で並び替え'
}
}
});
</script>この設定を入れると、検索欄、表示件数、件数表示、ページ送りなどが日本語になります。
公式の日本語JSONを読み込む方法
DataTablesには、コミュニティが提供している翻訳ファイルもあります。
ブラウザでCDNから読み込む場合は、language.urlを使えます。
new DataTable('#myTable', {
language: {
url: 'https://cdn.datatables.net/plug-ins/2.3.8/i18n/ja.json'
}
});手軽に日本語化したい場合は、この方法がシンプルです。
一方で、プロジェクト内で文言を細かく調整したい場合や、外部JSONの読み込みを増やしたくない場合は、次のように共通の日本語設定オブジェクトを作る方法がおすすめです。
何度も書かずに済むように共通化する
複数のDataTablesを使う画面では、毎回languageをすべて書くとコードが長くなります。
その場合は、日本語設定を定数として定義して使い回します。
const DATATABLES_JA = {
search: '検索:',
lengthMenu: '_MENU_件ずつ表示',
info: '_TOTAL_件中 _START_ から _END_ まで表示',
infoEmpty: '0件中 0 から 0 まで表示',
infoFiltered: '（全 _MAX_ 件から絞り込み）',
zeroRecords: '一致するデータがありません',
emptyTable: 'テーブルにデータがありません',
loadingRecords: '読み込み中...',
processing: '処理中...',
paginate: {
first: '先頭',
previous: '前へ',
next: '次へ',
last: '最後'
},
aria: {
orderable: 'この列で並び替え',
orderableReverse: 'この列を逆順で並び替え'
}
};
new DataTable('#usersTable', {
language: DATATABLES_JA
});
new DataTable('#ordersTable', {
language: DATATABLES_JA,
pageLength: 5
});これで、日本語設定は1か所にまとめられます。
文言を変更したい場合も、DATATABLES_JAだけ直せばよくなります。
さらに共通化するならdefaultsを使う
画面内のDataTablesをすべて同じ日本語設定にしたい場合は、DataTablesのデフォルト設定に日本語設定を入れておく方法もあります。
const DATATABLES_JA = {
search: '検索:',
lengthMenu: '_MENU_件ずつ表示',
info: '_TOTAL_件中 _START_ から _END_ まで表示',
infoEmpty: '0件中 0 から 0 まで表示',
infoFiltered: '（全 _MAX_ 件から絞り込み）',
zeroRecords: '一致するデータがありません',
emptyTable: 'テーブルにデータがありません',
paginate: {
previous: '前へ',
next: '次へ'
}
};
Object.assign(DataTable.defaults, {
language: DATATABLES_JA
});
document.querySelectorAll('.js-data-table').forEach((table) => {
new DataTable(table);
});HTML側では、DataTablesを適用したいテーブルに同じクラスを付けます。
<table class="display js-data-table">
...
</table>
<table class="display js-data-table">
...
</table>この書き方にしておくと、テーブルが増えても日本語設定を繰り返し書く必要がありません。
テーブルごとに表示件数などを変えたい場合は、個別の初期化で必要なオプションだけ追加します。
new DataTable('#usersTable');
new DataTable('#ordersTable', {
pageLength: 5
});languageは共通設定、pageLengthなどのテーブルごとの差分は個別設定、という分け方にすると管理しやすくなります。
使い分け
日本語化の方法は、用途に応じて選ぶとよいです。
- すぐ試したい場合:
language.urlで公式の日本語JSONを読み込む - 文言を調整したい場合:
languageオブジェクトを自分で定義する - 複数テーブルで使う場合:
DATATABLES_JAのような定数にまとめる - 画面全体で共通化したい場合:
DataTable.defaultsに設定する
まとめ
DataTablesの日本語化は、languageオプションに文言を渡して設定します。
1つのテーブルだけなら、初期化時にlanguageを書けば十分です。
複数のテーブルで同じ設定を使う場合は、日本語設定を定数化するか、DataTable.defaultsに共通設定として登録すると、同じ設定を何度も書かずに済みます。
コメント