页脚中的 DataTables.net 表列总和

Posted 2023-05-07

【中文标题】页脚中的 DataTables.net 表列总和

【英文标题】：DataTables.net table column sum in footer

【发布时间】：2015-03-11 04:01:08

【问题描述】：

在将每列的总和值（类“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" 具有正确的值，但不知何故没有插入​​到页脚中！ IE。它的元素显示为空。

请注意，下面的 sn-p 可以正常工作，但我想将每一列与类 sum 相加。

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" 循环多列...

【问题讨论】：

创建一个js fiddle并与我们分享。

类似这样的东西：jsfiddle.net/d49c8jLL

可能已经注意到一些可能相关或不相关的东西，但无论哪种方式......似乎一直在使用 JQuery 以错误的顺序加载 DataTables 引导 js。 （根据类似的js错误：***.com/questions/26165263/…）。我切换了它们，现在样式发生了一些变化以指示进度，但是任何列的 tfoot 元素中仍然没有总和值。

【参考方案1】：

只有在初始化 DataTable 时才需要执行您的表操作代码（参见initComplete 属性）。

还要确保在 <table> 中定义了 <tfoot></tfoot> 块，否则将没有页脚。

否则你很接近解决方案，请看下面更正的代码：

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。

更新

还有footerCallback 属性可以让您定义页脚显示回调函数，该函数将在每个“绘制”事件上调用。

initComplete 和footerCallback 之间的区别在于initComplete 被调用一次，而footerCallback 在每个“绘制”事件中被调用。

如果您要显示整个表格的总和，initComplete 就足够了。否则，如果您只需要在与当前页面相关的页脚数据中显示（如Footer callback example），请改用footerCallback。

【讨论】：

'initComplete' ;) 我是如此接近。感谢您的回答！

需要更新。此解决方案不适用于空白列。

@Siteogra，例如，请参阅 this jsFiddle。

@Gyrocode.com 对我不起作用，它支持所有版本的数据表吗！

@FreddySidauruk，不，只有 1.10 和更新版本。

【参考方案2】：

混合。空替换为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);
        );