javascript - 添加列并按类别分隔

Question

我有一个使用标准功能(分页、排序、搜索、日期范围等)的数据表，但我还需要在表底部有一部分显示每个办公室的总工资。如果您搜索“engineer”，输出(理想情况下)看起来像这样:

• 伦敦:295,500 美元
• 旧金山:409,350 美元
• 新加坡:234,500 美元
• 东京:139,575 美元
• 爱丁堡:103,600 美元
• 纽约:125,250 美元
• 总时数:1,307,775.00 美元

我尝试了一些不同的方法，但坦率地说，我缺乏脚本知识，而且超出了我的能力范围。谁能指出我如何解决这个问题的正确方向？

这是我的脚本:

"footerCallback": function (row, 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;
                };


                // ************NOT WORKING************ \\   
                // Total by category

                // First Attempt 
                if (api.column(5,
                    {
                    search: 'applied'
                    })
                    .data()
                    .length) {
                    var byCategory = api
                        .rows()
                        .data()
                        .reduce(function (a, c) {
                            a[c[7]] = a[c[7]] || 0;
                            a[c[7]] += intVal(c[5]);
                            return a;
                        },
                        {});
                }
                else {
                    byCategory = 0;
                }
                console.clear();
                console.dir('by category', byCategory); 
                /*
                // Second Attempt
                if (api.column(5, {
                    search: 'applied'
                }).data().length) {
                    var byCategory = api
                        .rows(5, {
                            search: 'applied'
                        })
                        .data()
                        .reduce(function (category, hours) {
                            category[hours[7]] = category[hours[7]] || 0;
                            category[hours[7]] += intVal(hours[5]);
                            return category;
                        }, {});
                }
                else {
                    byCategory = 0;
                }
                console.clear();
                console.dir('by category', byCategory); */
                // ************NOT WORKING************ \\  

                // Third Attempt
                /*var byCategory = api
                    .rows()
                    .data()
                    .reduce(function (a, c) {
                    a[c[7]] = a[c[7]] || 0;
                    a[c[7]] += intVal(c[5]);

                        for (var key in byCategory) {
                            if (byCategory.hasOwnProperty(key)) {
                                console.log(key + " -> " + byCategory[key]);
                            }
                        }                    
                }, {}); */

                // Total over all pages
                total = api
                    .column(5)
                    .data()
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);

                // Total over all filtered pages
                if (api.column(5, {
                    search: 'applied'
                }).data().length) {
                    pageTotal = api
                        .column(5, {
                            search: 'applied'
                        })
                        .data()
                        .reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                        });
                } else {
                    pageTotal = 0;
                }                 

                // Update footer
                $(api.column(5).footer()).html(                    
                    pageTotal.toFixed(2) + ' hours ( ' + total.toFixed(2) + ' total hours)' + '<br>' + Object.entries(byCategory) + ' hours'
                    //pageTotal.toFixed(2) + ' hours ( ' + total.toFixed(2) + ' total hours)' + '<br>' + Object.keys(byCategory).map(key => { console.log(key, byCategory[key]) }) + ' hours'
                    //pageTotal.toFixed(2) + ' hours ( ' + total.toFixed(2) + ' total hours)' + '<br>' + Object.keys(byCategory).forEach(key => { console.log(key, byCategory[key]) }) + ' hours' 
                );
            }

这是我的 jsfiddle 的链接:https://jsfiddle.net/l337method/hfyo90w7/

Answer 1

您可以使用下面的代码示例按办公室计算工资总额，如here所述，您可以根据需要进行修改。
将 1 替换为您要与之比较数据的列号。

 total = api.cells( function ( index, data, node ) {
                        return api.row( index ).data()[1] === 'textA' ?
                            true : false;
                    }, 0 )
              .data()
              .reduce( function (a, b) {
                  return intVal(a) + intVal(b);
              } );

更具体地说:您可以执行类似 this 的操作，您可以使用此函数对值求和。请参阅@davidkonrad，了解您想要的过滤器功能。

$("#example").on('search.dt', function() {
    alert(table.column( 0, {page:'current'} ).data().sum() );
});