datatables对某列进行求和

前言:

还有footerCallback属性,可让您定义页脚显示回调函数,该函数将在每个"绘制"事件上调用。
initComplete和footerCallback之间的区别在于,initComplete被调用一次,并且在每个"绘制"事件中被调用footerCallback。
如果要显示整个表的总和,initComplete就足够了。 否则,如果您只需要在页脚数据中显示与当前页面相关的数据(如在页脚回调示例中),请改用footerCallback。

一、footerCallback 方法

如果服务端不分页则 data是为所有数据,分页后则为当前页面的数据 所有这个方法不适用于服务器分页

          "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 all pages 分页后数据只是当前页面的
                total1 = api
                    .column(1)
                    .data()
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);

                total2 = api
                    .column(2)
                    .data()
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);

                total3 = api
                    .column(3)
                    .data()
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);

                // Total over this page
                pageTotal1 = api
                    .column(1, {page: 'current'})
                    .data()
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);

                pageTotal2 = api
                    .column(2, {page: 'current'})
                    .data()
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);
                pageTotal3 = api
                    .column(3, {page: 'current'})
                    .data()
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);

                // Update footer
                $(api.column(1).footer()).html(
                    '共计: ¥' + pageTotal1
                );
                $(api.column(2).footer()).html(
                    '共计: ' + pageTotal2
                );
                $(api.column(3).footer()).html(
                    '共计: ¥' + pageTotal3
                );
            }

二、initComplete方法

分页情况下:

json.extraInfo需要自定义参数 自己去查


   "initComplete": function (settings, json) {//初始化完成执行的函数
                 var api = this.api();
                 $(api.column(3).footer()).html(
                     '共计: ¥' + json.extraInfo
                 );
             }

计算某一列当前页面的数据和


  "initComplete": function (settings, json) {//初始化完成执行的函数
                var api = this.api();
                //计算当前页面的
                $( api.table().footer() ).html(
                    api.column( 3 ).data().sum()
                );
            }

需要添加 sum.js

参考:

datatables的sum方法

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

你可能感兴趣的:(Datatables,javascript,datatables)