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

第一种、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: "<button type='button'>编辑</button>" }],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代码如下：

<table id="example" class="table table-bordered table-condensed" style="white-space: nowrap;width:100%;cursor:pointer" cellspacing="0"><tfoot><tr><th style="border-left:0;border-right:0"></th><th style="border-left:0;border-right:0"></th><th style="border-left:0;border-right:0"></th><th style="border-left:0;border-right:0"></th><th style="border-left:0;border-right:0">数据合计：</th><th style="border-left:0;border-right:0"></th></tr></tfoot>
</table>

---

 

第二种方式：

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: "<button type='button'>编辑</button>" }],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代码如下：

<table id="example" class="display table table-striped table-over table-bordered" style="white-space: nowrap;width:100%;cursor:pointer" cellspacing="0"><thead></thead><tbody></tbody><tfoot><tr bgcolor="#FFCC99"><th style="border-left:0;border-right:0"></th><th style="border-left:0;border-right:0"></th><th style="border-left:0;border-right:0">合计:</th><th style="border-left:0;border-right:0" class="Sum"></th><th style="border-left:0;border-right:0"></th></tr></tfoot>
</table>