关于javascript：DataTables.net表页脚总和


DataTables.net table column sum in footer

在将每个类别为" sum"的列的总和值插入其页脚中时，我遇到了一个很小的细节问题。

代码(或多或少直接取自DataTables.net)是：

1
2
3
4
5
6
7
8
9
10
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"具有正确的值，但不以某种方式未插入页脚！即其-e元素显示为空。

请注意，下面的代码片段工作正常，但是我想用类sum来对每一列求和。

1
2
3
4
5
6
7
8
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。参见下面的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
"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"循环多列...

相关讨论

仅在初始化DataTable时才需要执行表操作代码(请参阅initComplete属性)。

还要确保在

中定义了

块，否则将没有页脚。

否则，您将非常接近解决方案，请在更正的代码下方查看：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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);
        });
    }
});

有关示例，请参见此JSFiddle。

更新

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

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

如果要显示整个表的总和，initComplete就足够了。 否则，如果您只需要在页脚数据中显示与当前页面相关的数据(如在页脚回调示例中)，请改用footerCallback。

相关讨论

混合。 空置为0

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
"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);
        });
    }