有两种实现方式，举例说明

第一种、JS代码如下：

var table;

table = $('#example').DataTable({

dom: 'Bfrtip',

scrollY: true,

scrollX: true,

scrollCollapse: true,

colReorder: true,

select: true,

stateSave: true,

//info: false,//关闭左下角关于行数和选中的提示

//filter: false,//关闭搜索

//paging: false,//关闭分页

pagingType: "full_numbers",

columns: [

{ title: "Name", data: "Name", className: "center" },

{ title: "Position", data: "Position" },

{ title: "Office", data: "Office" },

{ title: "Age", data: "Age" },

{ title: "Salary", data: "Salary", className: "canEditor" },

{ title: "操作", data: null, defaultContent: "编辑" }

],

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;

};

//当前页统计

total = api.column(4).data().reduce(function (a, b) { return intVal(a) + intVal(b); }, 0);

//全部统计

pageTotal = api.column(4, { page: 'current' }).data().reduce(function (a, b) { return intVal(a) + intVal(b); }, 0);

$(api.column(4).footer()).html(

'当前页:$' + pageTotal + ' ( 全部:$' + total + ')'

);

},

language: {

url: dtsLanguage

}

});

HTML代码如下：

第二种方式：

var table;

table = $('#example').DataTable({

dom: 'Bfrtip',

scrollY: true,

scrollX: true,

scrollCollapse: true,

colReorder: true,

select: true,

stateSave: true,

//info: false,//关闭左下角关于行数和选中的提示

//filter: false,//关闭搜索

//paging: false,//关闭分页

pagingType: "full_numbers",

columns: [

{ title: "Name", data: "Name", className: "center" },

{ title: "Position", data: "Position" },

{ title: "Office", data: "Office" },

{ title: "Age", data: "Age" },

{ title: "Salary", data: "Salary", className: "canEditor" },

{ title: "操作", data: null, defaultContent: "编辑" }

],

footerCallback: function (row, data, start, end, display) {

var data = table.search();

var ds = table.search(data).context[0].aiDisplay;

var Sum = 0;

$.each(ds, function (i, e) {

var data = table.row(e).data();

Sum = Number(Sum) + Number(data.Salary);

});

$(".Sum").html(Sum);

}

language: {

url: dtsLanguage

}

});

HTML代码如下：

本文地址：https://blog.csdn.net/xuchen_wang/article/details/107351632

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！