web-dev-qa-db-ja.com

フッターのDataTables.netテーブルの列合計

クラス「sum」を含む各列の合計値をフッターに挿入する際に、細かい点で問題が発生しています。

コード（DataTables.netからほぼそのまま取得）は次のとおりです。

var table = $('#example').DataTable();
        table.columns('.sum').each(function (el) {
            var sum = table
                .column(el)
                .data()
                .reduce(function (a, b) {
                    return parseInt(a, 10) + parseInt(b, 10);
                });
            $(el).html('Sum: ' + sum);
        });

「sum」の値は正しいですが、フッターに挿入されません。つまりその-elementは空で表示されます。

以下のスニペットは正常に機能しますが、各列をクラス合計で合計することに注意してください。

var table = $('#example').DataTable();
var column = table.column(4);

$(column.footer()).html(
    column.data().reduce(function (a, b) {
        return parseInt(a, 10) + parseInt(b, 10);
    })
);

/////////////////////////////////////////////////// ////////////////////////////////////

編集-回避策：

DataTableが初期化される場所にコードを移動し、代わりにfooterCallbackを使用しました。以下のコードを参照してください：

"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 this page
                    pageTotal = api
                        .column('.sum', { page: 'current' })
                        .data()
                        .reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    // Update footer
                    $(api.column('.sum').footer()).html(pageTotal);
                }

どういうわけか、値は右側のtfoot要素に挿入されます。そもそもなぜ機能しないのかはまだわかりません（ただし、コメントで説明したように、JSファイルを含める順序はその一部に関係している可能性があります）。

ここで、class = "sum"で複数の列をループする方法を理解する必要があります...

javascriptjquerydatatablesjquery-datatables
11
skepnaden

テーブル操作コードは、DataTableが初期化されている場合にのみ実行する必要があります（ initComplete プロパティを参照）。

また、<tfoot></tfoot>ブロックで定義された<table>それ以外の場合、フッターはありません。

それ以外の場合は、ソリューションに非常に近かったので、修正されたコードの下をご覧ください。

var table = $('#ticketTable').DataTable({
    'initComplete': function (settings, json){
        this.api().columns('.sum').every(function(){
            var column = this;

            var sum = column
                .data()
                .reduce(function (a, b) { 
                   a = parseInt(a, 10);
                   if(isNaN(a)){ a = 0; }                   

                   b = parseInt(b, 10);
                   if(isNaN(b)){ b = 0; }

                   return a + b;
                });

            $(column.footer()).html('Sum: ' + sum);
        });
    }
});

例については this JSFiddle をご覧ください。

[〜＃〜] update [〜＃〜]

また、すべての「描画」イベントで呼び出されるフッター表示コールバック関数を定義できる footerCallback プロパティがあります。

initCompleteとfooterCallbackの違いは、initCompleteが1回呼び出され、「描画」イベントごとにfooterCallbackが呼び出されることです。

テーブル全体の合計を表示する場合は、initCompleteで十分です。それ以外の場合、現在のページのみに関連するフッターデータを表示する必要がある場合（ Footerコールバックの例 ）、代わりにfooterCallbackを使用します。

8
Gyrocode.com

混合。空が0に置き換えられました

"initComplete": function (settings, json) {
        this.api().columns('.sum').every(function () {
            var column = this;

            var intVal = function (i) {
                return typeof i === 'string' ?
                i.replace(/[\$,]/g, '') * 1 :
                    typeof i === 'number' ?
                        i : 0;
            };

            var sum = column
                .data()
                .reduce(function (a, b) {
                    return intVal(a) + intVal(b);
                });

            $(column.footer()).html('Sum: ' + sum);
        });
    }
2
Viktor Bogutskii