Jquery Datatableのfooterで合計/総合計を表示したい

Question

DataTableを使ってフッターの１行目にページ合計、２行目に総合計を表示しようとしています。
https://datatables.net/

                <tfoot>
                    <tr>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th>合計</th>
                        <th>0</th>
                    </tr>
                    <tr>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th>総合計</th>
                        <th>0</th>
                    </tr>
                <tfoot>

            "footerCallback" : function ( row, data, start, end, display ){
                var api = this.api(), data;

                // Remove the formatting to get integer data for summation
                var intVal = function ( i ) {
                    return typeof i === 'string' ?
                    i.replace(/[$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
                };

                // Total over all pages
                total = api
                    .column( 9 )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );

                // Total over this page
                pageTotal = api
                    .column( 9, { page: 'current'} )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );

                // Update footer
                $( api.column( 9 ).footer() ).html(
                    total
                );
            },

これで合計は表示されるようになったのですが、総合計のカラムの行を指定する方法がわかりません。

                $( api.column( 9 ).footer() ).html(
                    total
                );

はダメでしたorz

ご存じの方、ご教授ください。

よろしくお願いします。

Answer 1

こんにちは

<tfoot> の中に <tr> が複数行ある場合に、.footer() にパラメータを渡せて、例えば

api.column( 9 ).footer(0)

で、最初の行の該当セルを参照し、

api.column( 9 ).footer(1)

で、次の行の該当セルを参照してくれたりしないのかなと思いつつ、ドキュメントを調べましたが、（残念ながら）以下の記載がありました。

If you have multiple rows in the footer that you wish to manipulate you must use the table().footer() method to obtain the table footer element and then use standard DOM / jQuery methods to manipulate the node.

• 以上、 datatables.net公式: column().footer() より引用

上記曰く、

フッターに複数行が含まれる場合は、 table().footer() メソッドでフッター要素が取れるので、それに対して通常の DOM または JQuery による操作をしてください。

ということのようです。

参考のため、上記に沿った簡単なサンプルを作成して、以下に上げておきました。

• jun68ykt/q206620

このレポジトリには、 Footer callback に掲載されているサンプルの表の <tfoot> に 2行目の <tr> を追加し、総合計はそちらに記載するように修正したもので、以下の手順で修正しています。

• 最初のコミット では、掲載されているサンプルをそのままコピペして作成した各ファイルをコミットしています。

　　

• 次のコミット、 tfootが2行である場合の対応例 は、先のドキュメントの説明にそった修正の一例です。

api.table().footer() で <tfooter> を取得し、これに含まれる(２つの）金額表示セルに各合計金額を表示させています。

以下の画像は、修正後のHTMLを表示させたところです。

以上、参考になれば幸いです。

Comments

[kumakake]

ありがとうございます！
試して報告入れます！

[kumakake]

確認できました。
助かりましたm(_ _)m

[jun68ykt]

コメント、ありがとうございます。解決されましたようで、よかったです ????

回答に書いた修正案が唯一の方法というわけでなく、他にも

tfootが2行である場合の対応例(別案)
https://git.io/fjFmy

といった方法もありますし、他にもやり方はありそうです。

サポート
https://datatables.net/forums/
の検索ワードに
multiple rows in footer
と入れて、投稿者の質問や要望と、ライブラリ提供者側の回答をざっと読んでみても、ライブラリ制作者としては、

現状、column().footer() では、 <tfoot> の中の２行目以降は取得できないので、2行以上ある場合は、api.table().footer()　で <tfoot> を取ってきて、あとは、いつもの DOMやJQueryのやり方で、お好きにどうぞ

ということのようです。

[kumakake]

ありがとうございます！
別案のclassでの指定が便利ですよね。