4

私は自分のサイトでdatatablejqueryプラグインを使用しています。すべてうまく機能しています。

ただし、プラグインスクリプトの列フィルターを使用してテーブルを拡張しようとしているので、フッターにデータを要約します。フィルタを正しく機能させることができます。

データを要約するためのデータテーブルの例は、データのページまたはデータセット全体のいずれかでのみ機能します。

私はこのスレッドを見つけました：http ：//datatables.net/forums/discussion/2053/fnfootercallback-sum-column-after-filter/p1同様の解決策を探しています。著者は次の機能を提案しています。

._('td:nth-child(4)', {"filter": "applied"})

これは明らかに、フィルタリングされたデータのオブジェクトを返します。しかし、これを取得すると、どこからデータを追加し始めるのかわかりません

現時点では、私のデータテーブルスクリプト（投稿のために短縮されています）は次のようになっています。

table.dataTable({...


    "fnFooterCallback": function ( nRow, aaData, iStart, iEnd, aiDisplay ) {

        /*
                     * Calculate the total sales for the table (ie inc. outside
                     * the pagination)
                     */
        var iTotalSales = 0;
        for ( var i=0 ; i<aaData.length ; i++ )
        {
            iTotalSales += aaData[i][2]*1;
        }

        /* Calculate the total sales on this page */
        var iPageSales = 0;
        for ( var i=iStart ; i<iEnd ; i++ )
        {
            iPageSales += aaData[ aiDisplay[i] ][2]*1;
        }

        /* Modify the footer row to match what we want */
        var secondRow = $(nRow).next()[0];
        var nCells = secondRow.getElementsByTagName('td');
        nCells[0].innerHTML = accounting.formatMoney(iPageSales, "£ ", 2) +
                ' Page Total ('+ accounting.formatMoney(iTotalSales, "£ ", 2) +' Total Sales)';
    }

})
        .columnFilter({
            aoColumns: [ { type: "date-range" },
                null,
                { type: "text"  },
                { type: "text"  },
                { type: "select"  },
                { type: "select"  }
            ]

        })
        ._('td:nth-child(4)', {"filter": "applied"});

私は現在、テーブルの合計に対してページでフィルタリングされた合計を表示する上記の要約を持っています（フィルタリングされただけでなくすべてのデータ）

私はjqueryの初心者です-最後の呼び出しで作成されたオブジェクトの操作をどこから始めればよいかわかりません

ありがとうございました

4

2 に答える 2

4

実行._('td:nth-child(4)', {"filter": "applied"})すると、その列の値の配列が返されます。したがって、フィルタリング後にテーブルが次のようになっている場合:

col 1 | col 2 | col 3 | col 4
foo   | blah  |   $18 |   154
bar   | blech |    $2 |   109

...次のコマンド

var col4 = $('#mytable').dataTable()._('td:nth-child(4)', {"filter": "applied"})

...あなたに与えるでしょうcol4 = [154, 109]。そこから、単に col4 をトラバースしてその値を合計し、その結果をフッター行の適切な場所に手動で挿入します。

于 2014-01-16T16:29:17.380 に答える
2

データ テーブル 1.10 では、API で列メソッドを使用できます。.dataTable の代わりに .DataTable を呼び出した場合にのみ存在することに注意してください。私は古いデータテーブルコードを移行していたので、それは1時間の間つまずきました.

以下のサンプルでは、​​データ テーブルを作成し、フッターの再計算時に実行される関数をバインドします。フッターが再計算されると、関数はコストを含むテーブル内の列を検索します。次に、この列の値を合計します。

  1. データテーブルの現在のページの列に表示されるデータ。
  2. 列内のテーブル内のすべてのデータ。
  3. フィルター基準を満たす行に存在する列のデータ。

だから変数を見てくださいsearchTotalData:)

var dataTable = $('#csvtable').DataTable({
    'footerCallback': function(row, data, start, end, display){
        var api = this.api();
        var intval = function(i){
            //Excuse this ugliness, it comes from the datatables sample
            return typeof i === 'string' ? 
                i.replace(/[\$,]/g, '')*1 :
                typeof i === 'number' ? 
                    i : 0;
        };

        var costColumnIndex = $('th').filter(function(i){return $(this).text() == 'Cost';}).first().index();
        var totalData= api.column(costColumnIndex).data();
        var total = totalData.reduce(function(a ,b){ return intval(a) + intval(b); }, 0) .toFixed(2);
        var pageTotalData = api.column(costColumnIndex, {page: 'current'}).data();
        var pageTotal = pageTotalData.reduce(function(a,b){return intval(a) + intval(b);}, 0).toFixed(2);
        var searchTotalData = api.column(costColumnIndex, {'filter': 'applied'}).data();
        var searchTotal = searchTotalData.reduce(function(a,b){return intval(a) + intval(b);}, 0).toFixed(2);

        $('#cost').html('Approximate page total $' + pageTotal + ', search total $' + searchTotal + ', totally total $' + total);
    }   
});
于 2014-05-06T18:38:31.117 に答える