DataTables.net表列中的和字总和 [英] DataTables.net table column sum in footer

问题描述

这个代码（更多的是这个代码）或更少从DataTables.net直接获取）：

  var table = $（'＃example'）。 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）;}）;  

p>

sum具有正确的值，但以某种方式未插入页脚！即它的元素显示为空。

请注意，下面的代码片段可以正常工作，但是我想将每个列与课税相加。

  var table = $（'＃example'）DataTable（）; var column = table.column（4）; $（column.footer（））。 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 ，数据; //删除格式以获取求和的整数数据var intVal = function（i）{return typeof i ==='string'？ i.replace（/ [\ $，] / g，''）* 1：typeof i ==='number'？我：0; }; //总计超过此页面pageTotal = api .column（'。sum'，{page：'current'}）.data（）.reduce（function（a，b）{return intVal（a）+ intVal（b）; }，0）; //更新页脚$（api.column（'。sum'）。footer（））。html（pageTotal）; }  

不知何故现在这个值被插入到右边的tfoot元素中。仍然不知道为什么它不会在第一个工作（但是如在JS文件的注释顺序中提到的那样可能与其中的一些有关）。

现在我只需要弄清楚如何用class =sum循环多个列...

解决方案

你的表操作仅当DataTable初始化时才需要执行代码（请参阅 initComplete 属性）。

还要确保您在中定义< 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; } 
 
返回a + b; 
}）; 
 
 $（column.footer（））。html（'Sum：'+ sum）; 
}）; 
} 
}）; 
  

请参阅这个JSFiddle 为例。

更新

还有 footerCallback 属性，可以让您定义页脚显示回调函数，这将在每个画事件。

initComplete 和 footerCallback 之间的区别在于 initComplete 在每个draw事件上调用一次，$ code> footerCallback 。

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

I'm having issues with a tiny detail in inserting the sum value of each column, with class "sum", into its footer.

The code (more or less taken straight from DataTables.net) goes:

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" has the correct value but is somehow not inserted into the footer! I.e. its -element shows up empty.

Note that the snippet below works fine, but I want to sum each column with class 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);
    })
);

////////////////////////////////////////////////////////////////////////////////////

EDIT - Workaround:

I moved the code to where the DataTable is initialized and went with footerCallback instead. See below code:

"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);
                }

Somehow now the value is inserted into the right tfoot element. Still no idea why it wouldn't work in the first place (but as mentioned in comment order of including JS-files could have had to do with some of it).

Now I just have to figure out how to loop multiple columns with class="sum"...

解决方案

Your table manipulation code needs to be executed only when DataTable is initialized, (see initComplete property).

Also make sure you have <tfoot></tfoot> block defined in your <table> otherwise there would be no footer.

Otherwise you were very close to the solution, please see below the corrected code:

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);
        });
    }
});

See this JSFiddle for an example.

UPDATE

There is also footerCallback property that lets you defined footer display callback function which will be called on every "draw" event.

The difference between initComplete and footerCallback is that initComplete is called once and footerCallback on every "draw" event.

If you're displaying the sum for the whole table, initComplete should suffice. Otherwise if you require to show in the footer data relevant for current page only (as in Footer callback example), use footerCallback instead.

这篇关于DataTables.net表列中的和字总和的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！