Datatables で動的に footer を追加する

2018年7月1日2020年5月9日Java Script

Datatables で楽に footer を追加する方法はないものかと探していたら、いいものを見つけました。コード自体は煩雑になりますが、ただ追加するだけなので楽です。

footer.js

var oTable = $('#grid-table').DataTable({
/* 既存のテーブルに追加する場合は、ここから*/
fnFooterCallback: function(row, data, start, end, display) {
var api = this.api();
var footer = $(this).append('<tfoot><tr></tr></tfoot>');
this.api().columns().every(function () {
var column = this;
$(footer).append('<th><input type="text" style="width:100%;"></th>');
});
},
/*ここまでをコピーして、既存のコードにペースト*/
});

Dynamically add footer to jQuery Datatable

サンプルテーブル

タイトルコミで 3×3 のこういうテーブルを用意しました。

<table>
<thead>
<tr><th>列名1</th><th>列名2</th><th>列名3</th></tr>
</thead>
<tbody>
<tr><td>データ1</td><td>データ2</td><td>データ3</td></tr>
<tr><td>データ21</td><td>データ22</td><td>データ23</td></tr>
</tbody>
</table>

フッター(tfoot)なしのふつうの表です。これにフッターを後から加えます。

オプション なし の状態

オプションなしのデフォルトの状態。

ヘッダーとボディだけでフッター(tfoot)はありません。

footer.js を適用した状態

footer.js を書き加えた状態。

tfoot に input ボックスが追加されています。

インデックスとループカウントをフッターに挿入

インデックスとループカウントをフッターに挿入した状態

引数に はインデックス、テーブルループ回数、カラムループ回数 が利用できます。

ここではindex, t_count, c_count を用いてフッターに表示させています。

$('#sample3').DataTable({
fnFooterCallback: function(row, data, start, end, display) {
var api = this.api();
var footer = $(this).append('<tfoot><tr></tr></tfoot>');
this.api().columns().every(function (index,t_count,c_count) {
var column = this;
$(footer).append('<th>index:'+index+'　loop:'+c_count+'</th>');
});
},
});

インデックスなりカラムループ回数を利用すれば、配列を手軽に挿入できます。