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做统计报表
最近做了一个统计项目,这个统计项目大致的需求是统计接口的访问速度.客户端会调用一个接口来记录接口的访问情况,我的需求就需要分析这些数据,然后做出个统计报表. 需求实现 最初的时候想着每天把这些接口访问 ...
随机推荐
- PHP正则匹配与替换的简单例子
PHP正则匹配与替换的简单例子,含一个匹配获取加租字体例子和一个匹配替换超链接的例子. 1.查找匹配 <b> 与 </b> 标签的内容: <?php $str = &qu ...
- ubuntu12.04 Qt WebKit编译
转载自:http://my.oschina.net/u/257674/blog/167050 官方文档: http://trac.webkit.org/wiki/BuildingQtOnLinux#D ...
- Java中中英文对齐输出问题，以及Java中的格式化输出
一 中英文对齐输出问题 问题,要求控制台输出如下: abcefg def 森林 阿狗 其实就是要求对齐输出,各种查找java的格式化输出,然后发现只要一个简单的“\t”就可以实现. 代码如下: Sy ...
- 最短路径算法 SP
dijkstra求最短路径长度 dijkstra求最短路并记录路径 #include<stdio.h> #include<string.h> #include<stack ...
- SVG布局
http://www.w3cplus.com/html5/nesting-svgs.html
- win 7 64 位系统驱动签名
自己开发未经签名的驱动无法加载,关闭Windows 7系统中的驱动签名强制要求 bcdedit.exe -set loadoptions DDISABLE_INTEGRITY_CHECKS
- bzoj1015: [JSOI2008]星球大战starwar 并查集+离线处理
题目传送门 这道题可以改为离线处理 倒着找答案 这样删点就变成加点了 有了这个思想题目就很好写了哇 23333 #include<cstdio> #include<cstring&g ...
- JSP的简便写法
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAAFmCAIAAACwedIqAAAWfklEQVR4nO2d7XPV1p3H77+x+3JfpJ ...
- python 多进程multiprocessing 模块
multiprocessing 常用方法: cpu_count():统计cpu核数 multiprocessing.cpu_count() active_children() 获取所有子进程 mult ...
- 【hdoj_1049】Climbing Worm
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1049 以 上升-下降 一次为一个周期,一个周期时间为2分钟,每个周期上升距离为(u-d).先只考虑上升,再 ...