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中所述的以下代码示例按办公室计算工资总额，您可以根据需要进行修改。
将//Class class CropperImage { constructor($saveSizeBtn, $image) { this.$saveSizeBtn = $saveSizeBtn; this.$image = $image; this.initializeCropper(); this.saveCroppSize(this.$image, this.$saveSizeBtn); } initializeCropper() { this.$image.cropper({ minContainerWidth: 400, minContainerHeight: 400, }); } } //Import module import CropperImage from './Components/CropperImage'; $(() => { new CropperImage($('.saveCroppSize'), $('.img-rounded')); });替换为您要与之比较数据的列号。

更具体地说：您可以执行类似this的操作，可以使用此函数来汇总值。有关过滤器的确切要求，请参见@davidkonrad。

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

Answer 2

您应该真正考虑使用小型sum()插件。就您而言，接下来您需要的就是

drawCallback: function() {
  var sum = this.api().column( 5, { search:'applied', page: 'all' }).data().sum();
  $( this.api().column(5).footer() ).text(
    '$'+Number(sum.toFixed(1)).toLocaleString()
  );
}

您可以将其转换为“ 从所有页面获取所有column（5）值的总和，但仅获取那些未被过滤掉的页面”。每次您进行搜索，过滤等操作时，都会触发drawCallback。

以下是您的提琴的分叉版本-> https://jsfiddle.net/7cjL35dr/

代码有点混乱，因此我在添加sum()插件和drawCallback之前先进行清理。

添加列并按类别分开

2 个答案: