4

我在我的网站中使用数据表 jquery 插件。一切运作良好。

但是我试图通过使用插件脚本列过滤器来增强表格，然后我想总结页脚中的数据。我可以让过滤器正常工作。

数据表中用于汇总数据的示例仅适用于数据页面或整个数据集。

我找到了这个线程：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. 数据表当前页的列中显示的数据。
  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 回答