jquery - 数据表汇总过滤后的数据

标签 jquery datatables

我在我的网站中使用数据表 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 新手 - 我不知道从哪里开始操作最终调用中创建的对象

谢谢

最佳答案

当您运行 ._('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 对其值求和,然后手动将结果插入到页脚行的适当位置。

关于jquery - 数据表汇总过滤后的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15433119/

相关文章:

javascript - 阻止任何导航或按钮在页面上工作

javascript - 蒲公英数据表scrollX不起作用

javascript - DataTables 过滤单元格内容而不是数据库值

javascript - 如何迭代 Angular 数据表中的过滤行

javascript - Videojs 无法在 IE 9 及更高版本中工作

javascript - JQuery 自动完成建议未排序

javascript - 如何在 jQuery 方法中使用 'or' 条件?

php - 如何使用 jQuery forms.js 将 LI 附加到 UL

javascript - 如何在响应ajax后制作数据表

datatables - 无法读取未定义数据表的属性 'oFeatures'