方式一:统计当前页数据
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Content/layui/layui.js"></script>
<script>
layui.use('table', function () {
var table = layui.table;
table.render({
elem: '#test'
, url: '/demo/table/user/'
, cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
, totalRow: true //开启合计行
, cols: [[
{
field: 'id', width: 80, title: 'ID', sort: true, totalRowText: '合计行' }
, {
field: 'username', width: 80, title: '用户名' }
, {
field: 'sex', width: 80, title: '性别', sort: true }
, {
field: 'city', width: 80, title: '城市' }
, {
field: 'sign', title: '签名', width: '30%', minWidth: 100 } //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
, {
field: 'experience', title: '积分', sort: true }
, {
field: 'score', title: '评分', sort: true,totalRow: true }
, {
field: 'classify', title: '职业' }
, {
field: 'wealth', width: 137, title: '财富', sort: true }
]]
});
});
</script>
方式二:统计接口返回数据(layui需2.5.6以上,pearlayui项目下载layui.js覆盖即可)
当开启时,则默认由前端自动合计当前行数据。从 layui 2.5.6 开始: 若接口直接返回了合计行数据,则优先读取接口合计行数据,格式如下:
{
"code": 0,
"totalRow": {
"score": "666"
,"experience": "999"
},
"data": [{
}, {
}],
"msg": "",
"count": 1000
}
方式二示例:
如上,在 totalRow 中返回所需统计的列字段名和值即可。
另外,totalRow 字段同样可以通过 parseData 回调来解析成为 table 组件所规定的数据格式。