有兩種實(shí)現(xiàn)方式，舉例說(shuō)明

第一種、JS代碼如下：

var table;table = $('#example').DataTable({dom: 'Bfrtip',scrollY: true,scrollX: true,scrollCollapse: true,colReorder: true,select: true,stateSave: true,//info: false,//關(guān)閉左下角關(guān)于行數(shù)和選中的提示//filter: false,//關(guān)閉搜索//paging: false,//關(guān)閉分頁(yè)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;};//當(dāng)前頁(yè)統(tǒng)計(jì)total = api.column(4).data().reduce(function (a, b) { return intVal(a) + intVal(b); }, 0);//全部統(tǒng)計(jì)pageTotal = api.column(4, { page: 'current' }).data().reduce(function (a, b) { return intVal(a) + intVal(b); }, 0);$(api.column(4).footer()).html('當(dāng)前頁(yè):$' + 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">數(shù)據(jù)合計(jì)：</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,//關(guān)閉左下角關(guān)于行數(shù)和選中的提示//filter: false,//關(guān)閉搜索//paging: false,//關(guān)閉分頁(yè)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">合計(jì):</th><th style="border-left:0;border-right:0" class="Sum"></th><th style="border-left:0;border-right:0"></th></tr></tfoot> </table>

?

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。