datatables - 数据表显示总计
问题描述
我怎样才能在数据表上显示总共一列?我尝试使用数据表文档示例,但我不明白它是如何工作的。
我尝试像这样调整数据表文档示例:
jQuery('#tableName').DataTable({
pagingType: 'full',
lengthMenu: [
[5, 10, 25, 50, -1],
[5, 10, 25, 50, 'All'],
],
searching: true,
ordering: true,
aaSorting: [],
paging: true,
select: false,
info: true,
responsive: true,
data: [
{ col1: "col1.1", col2: 20 },
{ col1: "col1.2", col2: 30 }
],
columns: [
{ data: 'col1', title: 'col1' },
{ data: 'col2', title: 'col2' }
],
dom: 'lBfrtip',
buttons: [{
extend: 'copy',
text: '<i class="far fa-copy"></i>',
title: lang.componentSection,
footer: true
}, {
extend: 'pdf',
text: '<i class="far fa-file-pdf"></i>',
title: lang.componentSection,
footer: true
}, {
extend: 'excel',
text: '<i class="far fa-file-excel"></i>',
title: lang.componentSection,
footer: true
}, {
extend: 'print',
text: '<i class="fas fa-print"></i>',
title: lang.componentSection,
footer: true
}],
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
var total = api
.column( 1 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Total over this page
var pageTotal = api
.column( 1, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( 1 ).footer() ).html(
'$'+pageTotal +' ( $'+ total +' total)'
);
}
});
但我不知道如何显示结果或者是否有什么不好的地方。(我在控制台中没有错误,这是一个简化的示例,在真实数据表中我从 ajax 获取数据)
我有总值,但我不知道如何用这个 sintax 显示(column defs)
我可以使用 jQuery 显示总 addinf html 标签,但是使用这种方法总不会导出到 pdf、excel、...
这是示例代码:
jQuery('#tableName').append('<tfoot>\
<tr>\
<th colspan="4" style="text-align:right">Total:' + pageTotal + '</th>\
<th></th>\
</tr>\
</tfoot>');
解决方案
对页脚进行 esport 的唯一方法是在生成数据表之前对其进行绘制,如下面的简化示例所示:
jQuery('#' + tableName).html('<tfoot>\
<th></th>\
<th style="text-align:center; border:0.5px solid gray"></th>\
</tfoot>');
jQuery('#tableName').DataTable({
pagingType: 'full',
lengthMenu: [
[5, 10, 25, 50, -1],
[5, 10, 25, 50, 'All'],
],
searching: true,
ordering: true,
aaSorting: [],
paging: true,
select: false,
info: true,
responsive: true,
data: [
{ col1: "col1.1", col2: 20 },
{ col1: "col1.2", col2: 30 }
],
columns: [
{ data: 'col1', title: 'col1' },
{ data: 'col2', title: 'col2' }
],
dom: 'lBfrtip',
buttons: [{
extend: 'copy',
text: '<i class="far fa-copy"></i>',
title: lang.componentSection,
footer: true
}, {
extend: 'pdf',
text: '<i class="far fa-file-pdf"></i>',
title: lang.componentSection,
footer: true
}, {
extend: 'excel',
text: '<i class="far fa-file-excel"></i>',
title: lang.componentSection,
footer: true
}, {
extend: 'print',
text: '<i class="fas fa-print"></i>',
title: lang.componentSection,
footer: true
}],
footerCallback: function ( row, data, start, end, display ) {
var api = this.api(), data;
var intVal = function ( i ) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '.')*1 :
typeof i === 'number' ?
i : 0;
};
var total = api.column( 1 ).data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
total = total.toString().replace(/[\$.]/g, ',');
jQuery(api.column( 1 ).footer()).html(total);
}
});
把所有<th></th>
的
这个想法是用 jQuery 注入页脚,这样你就可以销毁表并使用相同的页脚重新生成(例如,如果你必须将该表放入新列或类似的东西)
没有它就行不通,api.column( 1 ).data()
因为如果你把它和 jQuery 放在一起就不能导出。
推荐阅读
- c# - Linq to mongodb:子查询条件下的意外行为
- scala - Spark Scala - 如何初始化一个包含 1000 列的空数据框
- ruby-on-rails - Ruby on Rails 正在更改表单中的 id 参数
- javascript - 无法从量角器读取整个本地/会话存储
- java - 更快的杰克逊不可能这么愚蠢(行尾)
- python-3.x - 如何将此命令翻译成 Python 3 语言?
- java - WSDL 创建解析错误
- c++ - 将二维向量传递给函数
- java - JsonMessage 无法解析为类型
- julia - Julia - 错误:LoadError:UndefVarError:绘图未定义