jQueryのプラグインで、DataTablesというテーブル表示プラグインがあります。 オプションの種類がとても多いので、様々なことに使うことができます。
今回はDataTablesを使って、取得したデータのカラムを追加する方法を解説していきます。例ではAPI等で取得したデータをテーブル化するにあたり、1列目にチェックボックスを追加するという状況を考えます。
テーブルデータ
今回利用するデータは以下を使います。犬と猫の種類と原産国等を持たせています。
+-----+--------+---------+--------+------+
| id | animal | type | origin | cnt |
+-----+--------+---------+--------+------+
| 1 | inu | NULL | NULL | 6 |
| 2 | inu | pug | china | 6 |
| 3 | inu | samoyed | russia | 3 |
| 4 | inu | shiba | japan | 5 |
| 5 | neko | NULL | NULL | 1 |
| 6 | neko | exotic | us | 4 |
| 7 | neko | mike | japan | 2 |
| 8 | neko | ragdoll | us | 6 |
+-----+--------+---------+--------+------+これをJSON形式で書くと以下のようになります。
const tableData = [
{ id : 1, animal : 'inu', type : null, origin : null, cnt : 6, },
{ id : 2, animal : 'inu', type : 'pug', origin : 'china', cnt : 6, },
{ id : 3, animal : 'inu', type : 'samoyed', origin : 'russia', cnt : 3, },
{ id : 4, animal : 'inu', type : 'shiba', origin : 'japan', cnt : 5, },
{ id : 5, animal : 'neko', type : null, origin : null, cnt : 1, },
{ id : 6, animal : 'neko', type : 'exotic', origin : 'us', cnt : 4, },
{ id : 7, animal : 'neko', type : 'mike', origin : 'japan', cnt : 2, },
{ id : 8, animal : 'neko', type : 'ragdoll', origin : 'us', cnt : 6, },
];※今回の説明ではソースにベタ書きしていますが、API等からの取得に関しても同様です。
カラム定義
テーブルの列(カラム)を定義します。
1列目にチェックボックスを追加する想定なので、dataはnullを指定しています。
なおこの列のdataの指定は、nullでなくても構いません。
存在するカラム名であればidでも、animalでも指定することができます。
columnDefs : [
{ 'title' : '', 'data' : null, 'targets' : 0, },
{ 'title' : '動物', 'data' : 'animal', 'targets' : 1, },
{ 'title' : '種別', 'data' : 'type', 'targets' : 2, },
{ 'title' : '原産国', 'data' : 'origin', 'targets' : 3, },
{ 'title' : '匹数', 'data' : 'cnt', 'targets' : 4, },
],カラム表示内容処理
先ほど指定したカラムに表示内容を指定します。
createdRow : function(row, data, dataIndex) {
let disp_chkbox = $('td:eq(0)', row),
_chkbox = $('<input>', {
type : 'checkbox',
name : 'select',
value : data.id,
});
disp_chkbox.text('');
disp_chkbox.append(_chkbox);
},処理を見ていただければ分かる通り、createdRowを使っています。
つまり、テーブルを生成する際に、「1行ずつ読み込み、対応する列に対して特定の処理を施す」ということをしています。
$('td:eq(0)', row)で対応する行の0番目のtdに対して、_chkboxを追加します。
要素をappendする前に、disp_chkbox.text('');を入れています。
この処理を入れないと、columnDefsで指定したdataの値が表示されてしまうため、
一旦tdを空にして、改めてチェックボックスを入れています。
完了
これでDataTablesを生成するとチェックボックスが付与されたテーブルが生成されます。
今回の方法を使うと、列の追加だけではなく、複雑な表示フォーマットも対応できますし、行に対してリンクを追加するといったこともできます。
是非、色々と試してみてください。
今回説明で利用したソースはこちらにあります。
参考サイト
DataTables - createdRowhttps://datatables.net/reference/option/createdRow