質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.34%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 2,710

score 41

DataTableを使ってフッターの1行目にページ合計、2行目に総合計を表示しようとしています。
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

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

よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+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.

上記曰く、

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

ということのようです。

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

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

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

  • 次のコミット、 tfootが2行である場合の対応例 は、先のドキュメントの説明にそった修正の一例です。 
    api.table().footer() で <tfooter> を取得し、これに含まれる(2つの)金額表示セルに各合計金額を表示させています。

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

イメージ説明

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/18 06:37

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

    キャンセル

  • 2019/08/18 08:54

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

    キャンセル

  • 2019/08/18 09:12

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

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

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

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

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

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

    ということのようです。

    キャンセル

  • 2019/08/20 14:42

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る