添加列并按类别分隔
Posted
技术标签:
【中文标题】添加列并按类别分隔【英文标题】：Add Columns And Separate By Category 【发布时间】：2019-01-30 22:40:51 【问题描述】：我有一个使用标准功能（分页、排序、搜索、日期范围等）的数据表，但我还需要在表格底部有一部分显示每个办公室的总工资。如果您搜索“工程师”，输出将（理想情况下）如下所示：
伦敦：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/
【问题讨论】：
嗨@l337method，我不确定你是如何显示的。但是this会帮助你理解 哦，太棒了。我在寻找信息时没有找到那个例子。谢谢你。 :D 【参考方案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() );
);
【讨论】：
我试图找到如何让它遍历并显示每个类别的总和，而不是仅仅匹配“X”类别并显示总和。不过，这似乎是第一步。我会看看我能想出什么...... 您不会碰巧知道如何最小化总计结果以仅显示过滤后的总计，对吗？我在语法上苦苦挣扎。 我听不懂你在说什么。 因此，例如，如果我要按“会计”对我的 jsfiddle 进行排序，它会给出过滤后的总数以及总体总数。在您向我展示的这几个示例中设置代码的方式仅显示了办公室的总体总数。我之前解决这个问题的方法是：.column(5, search: 'applied' ) 但是，我不确定如何使用 .cells 来实现它。 啊，哈！我想到了。 .cells 的语法只是略有不同。最终需要这样写： .cells( search: 'applied',function(index, data, node) 谢谢您的回复。【参考方案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 之前尝试进行清理。
【讨论】：
对不起，这只是我的经验不足。我将尝试使用您的建议清理代码。谢谢！以上是关于添加列并按类别分隔的主要内容，如果未能解决你的问题，请参考以下文章