JQuery Datatables 实现对某一列的数据合计汇总

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

第一种、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 实现对某一列的数据合计汇总相关推荐

JQuery Datatables 动态配置参数异步加载数据
背景需求在前端动态设置datatables需要传递到后端的查询参数,异步加载返回的数据.点击这里进入datatables中文网异步加载数据说明直接上代码 var table; var url = ...
jQuery DataTables的serverSide选项
功能 serverSide是jQuery DataTables 控制使用服务器端还是客户端处理数据的选项. 描述 jQuery DataTables有两种基本的数据操作模式 : 客户端处理 : 过滤, ...
jquery.dataTables.min.js: Uncaught TypeError: Cannot read property 'style' of undefined
Jquery DataTable使用报这个错: jquery.dataTables.min.js: Uncaught TypeError: Cannot read property 'style' o ...
jQuery dataTables 的使用
2019独角兽企业重金招聘Python工程师标准>>> jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化等 ...
jQuery - （JQuery datatables api 使用解读）
学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...
最全的jquery datatables api 使用详解
https://www.cnblogs.com/amoniyibeizi/p/4548111.html 最全的jquery datatables api 使用详解学习可参考:http://www.g ...
jquery.dataTables.min.js:62 Uncaught TypeError: Cannot read property ‘style‘ of undefined原因
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 报错: jquery.dataTables.min.js:62 Uncaught TypeError ...
JQuery Datatables editor进行增删改查操作(一)
背景 editor作为Datatables的插件之一,功能十分强大,有全行编辑模式.泡泡编辑模式.行内编辑模式.个人觉得,除了泡泡编辑模式外,其他两种模式功能在实际项目中会经常使用到,泡泡模式提供了模 ...
前端控件JQuery Datatables使用——常用功能初始化
本文用于自己记录,忘记时可以用来回顾.点击这里进入JQuerydatatable官网API地址 JQuery Datatables初始化个人比较喜欢JQueryDatatables的Bootstra ...

JQuery Datatables 实现对某一列的数据合计汇总

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

第一种、JS代码如下：

HTML代码如下：

第二种方式：

HTML代码如下：

JQuery Datatables 实现对某一列的数据合计汇总相关推荐

最新文章

热门文章