有兩種實現方式，舉例說明

第一種、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>

?

總結

以上是生活随笔為你收集整理的JQuery Datatables 实现对某一列的数据合计汇总的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。