Bootstrap-table使用footerFormatter做统计列
写在前面：
在做表格的时候，难免会碰到做统计的时候。由于在项目中涉及到做统计的功能比较简单，之后也就没有过多的去研究更复杂的，这里简单记录下。
这次就直接先上图：一个简单的例子
看到效果图还是很好的，也比较的简单，下面看一下具体的代码实现，这里也就直接上代码了。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String scheme = request.getScheme();
String serverName = request.getServerName();
String contextPath = request.getContextPath();
int port = request.getServerPort(); //网站的访问跟路径
String baseURL = scheme + "://" + serverName + ":" + port
+ contextPath;
request.setAttribute("baseURL", baseURL);
System.out.println("baseURL:" + baseURL); %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<%--设置IE渲染方式(文档)默认为最高(这部分可以选择添加也可以不添加)--%>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Work Members</title> <!--图标样式-->
<link rel="stylesheet" type="text/css" href="${baseURL}/Bootstrap/bootstrap/css/bootstrap.min.css" />
<link href="${baseURL}/Bootstrap/bootstrap-table/bootstrap-table.css" rel="stylesheet" />
<link href="${baseURL}/Bootstrap/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" />
<link href="${baseURL}/Bootstrap/bootstrap-dialog/css/bootstrap-dialog.css" rel="stylesheet" /> <!-- inline styles related to this page -->
<!-- ace settings handler -->
<script src="${baseURL}/Bootstrap/bootstrap/assets/js/jquery-2.0.3.min.js"></script>
<!--[if IE]>
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>-->
<script src="${baseURL}/Bootstrap/bootstrap/assets/js/jquery-1.10.2.min.js"></script>
<script src="${baseURL}/Bootstrap/bootstrap/assets/js/bootstrap.min.js"></script>
<script src="${baseURL}/Bootstrap/bootstrap-table/bootstrap-table.js"></script> <style type="text/css">
table,table tr th, table tr td {
border:1px solid #fac090;
}
/*解决设置表头列宽无效*/
#table{
table-layout: fixed;
} </style>
</head>
<body > <div style="">
<table id="table_showMembers"></table>
</div>
</body> <script type="text/javascript"> $(function () {
var table_showMembers = $('#table_showMembers').bootstrapTable({
url: '${baseURL}/listProjectWorkItemAssignmentByProjAndWorkItemId?projId=151&workItemId=1',
method: 'get',//请求方式（*）
toolbar: '#toolbar',//工具按钮用哪个容器
striped: true,//是否显示行间隔色
cache: false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: false,//是否显示分页（*）
sortable: false,//是否启用排序
sortOrder: "asc",//排序方式
queryParams: function (params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的
return {//这里的params是table提供的
startIndex: params.offset,//从数据库第几条记录开始
pageSize: params.limit//每页记录数
};
},//传递参数（*）
sidePagination: "server",//分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1,//初始化加载第一页，默认第一页
pageSize: 1,//每页的记录行数（*）
pageList: [2, 4, 6, 8],//可供选择的每页的行数（*）
// search: true,//是否显示表格搜索，此搜索是客户端搜索，不会进服务端
contentType: "application/x-www-form-urlencoded",
strictSearch: true,
//showColumns: true,//是否显示内容列下拉框
//showRefresh: true,//是否显示刷新按钮
minimumCountColumns: 2,//最少允许的列数
clickToSelect: true,//是否启用点击选中行
//height: 700,//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
width:'50%',
uniqueId: "hrPerCode",//每一行的唯一标识，一般为主键列
//showToggle: true,//是否显示详细视图和列表视图的切换按钮
cardView: false,//是否显示详细视图
detailView: false,//是否显示父子表
checkboxHeader :true, //隐藏表头的checkbox
singleSelect: false, //开启单选
showFooter:true, //开启底部
columns: [
{
field: 'perCode',
title: '工號',
valign:'middle',
align:'center',
visible:true, //隐藏列
width:'100px',
footerFormatter: function(value){
return "Total Work item hours ";
}
},
{
field: 'perName',
title: '姓名',
align:'center',
width:'150px',
},
{
field: 'hasWorkedHours',
title: 'Invested hours',
align:'center',
width:'80px',
formatter: function(value,row,index){
return row.hasWorkedHours+"H";
},
//计算此列的值
footerFormatter: function(rows){
var sum = 0;
for (var i=0;i<rows.length;i++) {
sum += rows[i].hasWorkedHours
}
return sum+"H";
}
}, ],
onPostBody:function () {
//合并页脚
merge_footer();
}
});
}); //合并页脚
function merge_footer() {
//获取table表中footer 并获取到这一行的所有列
var footer_tbody = $('.fixed-table-footer table tbody');
var footer_tr = footer_tbody.find('>tr');
var footer_td = footer_tr.find('>td');
var footer_td_1 = footer_td.eq(0);
//由于我们这里做统计只需要两列，故可以将除第一列与最后一列的列全部隐藏，然后再设置第一列跨列
//遍历隐藏中间的列 下标从1开始
for(var i=1;i<footer_td.length-1;i++) {
footer_td.eq(i).hide();
}
//设置跨列
footer_td_1.attr('colspan', footer_td.length-1).show();
//这里可以根据自己的表格来设置列的宽度 使对齐
footer_td_1.attr('width', "910px").show();
}
</script> </html>
好啦，基本的用法都在代码中做了简单的解释，几个值得注意的地方也在代码中用黄色背景标注了，这里就不再细说了。
Bootstrap-table使用footerFormatter做统计列的更多相关文章
- bootstrap table 怎么实现前两列固定冻结？
$("#Table").bootstrapTable('destroy').bootstrapTable({ pagination: true,//分页 minimumCountC ...
- bootstrap table footerFormatter用法 统计列求和 sum、average等
其实上一篇blog里已经贴了代码,简单解释一下吧: 1.showFooter: true,很重要,设置footer显示: $(cur_table).bootstrapTable({ url: '/et ...
- JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...
- [转] BootStrap table增加一列显示序号
原文地址:https://blog.csdn.net/aboboo5200/article/details/78839208 最近由于项目需要,使用BootStrap table做数据展示,其中要在第 ...
- [转]bootstrap table 动态列数
原文地址:https://my.oschina.net/u/2356355/blog/1595563 据说bootstrap table非常好用,从入门教程中了解到它的以下主要功能: 由于固定表头意味 ...
- bootstrap table教程--后台数据绑定、特殊列处理、排序
上一篇文章介绍了基本的使用教程.本节主要介绍Bootstrap的后台数据绑定.特殊列处理及列的排序功能 1.数据绑定 一般做程序设计,很少是使用json文件直接绑定数据.基本上我们都是使用编程语言进行 ...
- bootstrap table表格属性、列属性、事件、方法
留存一份,原文地址http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 表格参数 表格的参数定义在 jQuery.fn.bootst ...
- Bootstrap Table列宽拖动的方法
在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table实现的,要求能利用拖动改变列宽,现将实现的过程记录如下: 1. Bootstrap Table可拖动,需要用到它 ...
- statpot:使用mongo+bootstrap+highcharts做统计报表
最近做了一个统计项目,这个统计项目大致的需求是统计接口的访问速度.客户端会调用一个接口来记录接口的访问情况,我的需求就需要分析这些数据,然后做出个统计报表. 需求实现 最初的时候想着每天把这些接口访问 ...
随机推荐
- 更改win10和mint双系统默认启动顺序
更改win7 & Linuxmint双系统安装后更改默认启动顺序 1.打开一个term,编辑/etc/default/grub,即sudo nano /etc/default/grub,把se ...
- java类中获取WEB-INF路径
WEB-INF路径 String path = WsTestBOImpl.class.getClass().getResource("/").getPath(); path = p ...
- cmd常用命令行
新建文件夹或文件 打开磁盘 F: 退出cmd exit 返回上一级 cd.. 创建文件夹 md 文件夹名 在d盘创建文件夹 md d:\文件夹名 在当前目录打开 ...
- 51Nod 1118 机器人走方格--求逆元
(x/y) %mod =x*(y^(mod-2))%mod; 在算x,y的时候可以一直mod 来缩小 y^(mod-2)显然是个快速幂 #include <iostream> #inclu ...
- 【BZOJ】1691: [Usaco2007 Dec]挑剔的美食家
[算法]扫描线+平衡树(set) [题解]很明显的二维偏序数点,排序后扫描线,现加点后查询答案. 则问题转化为一维偏序,显然贪心找第一个比当前大的最优,所以用平衡树维护. 记得开multiset!!! ...
- 【BZOJ】1725: [Usaco2006 Nov]Corn Fields牧场的安排
[算法]状压DP [题解]对于上一行的每个状态,每行进行DFS. #include<cstdio> #include<algorithm> #include<cstrin ...
- [转载]C#用正则表达式 获取网页源代码标签的属性或值
最近调试程序需要用到获取网页指定标签的属性和值,找到了一个比较好的正则匹配方法,特此备份. [原]C#用正则表达式 获取网页源代码标签的属性或值 整理两个 在C#中,用正则表达式 获取网页源代码标签的 ...
- DotNETCore 学习笔记 宿主
Hosting -------------------------------------------------------------------------- Setting up a Host ...
- MongoDB安装成为Windows服务
使用以下命令将MongoDB安装成为Windows服务.笔者的MongoDB目录为C:\Program Files\MongoDB\Server\3.6\bin 切换到C:\Program Files ...
- [Leetcode Week10]Minimum Time Difference
Minimum Time Difference 题解 原创文章,拒绝转载 题目来源:https://leetcode.com/problems/minimum-time-difference/desc ...