写在前面：

　　在做表格的时候，难免会碰到做统计的时候。由于在项目中涉及到做统计的功能比较简单，之后也就没有过多的去研究更复杂的，这里简单记录下。

　　这次就直接先上图：一个简单的例子

　　看到效果图还是很好的，也比较的简单，下面看一下具体的代码实现，这里也就直接上代码了。

<%@ 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做统计列的更多相关文章

  1. bootstrap table 怎么实现前两列固定冻结？

    $("#Table").bootstrapTable('destroy').bootstrapTable({ pagination: true,//分页 minimumCountC ...

  2. bootstrap table footerFormatter用法 统计列求和 sum、average等

    其实上一篇blog里已经贴了代码,简单解释一下吧: 1.showFooter: true,很重要,设置footer显示: $(cur_table).bootstrapTable({ url: '/et ...

  3. JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

    前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...

  4. [转] BootStrap table增加一列显示序号

    原文地址:https://blog.csdn.net/aboboo5200/article/details/78839208 最近由于项目需要,使用BootStrap table做数据展示,其中要在第 ...

  5. [转]bootstrap table 动态列数

    原文地址:https://my.oschina.net/u/2356355/blog/1595563 据说bootstrap table非常好用,从入门教程中了解到它的以下主要功能: 由于固定表头意味 ...

  6. bootstrap table教程--后台数据绑定、特殊列处理、排序

    上一篇文章介绍了基本的使用教程.本节主要介绍Bootstrap的后台数据绑定.特殊列处理及列的排序功能 1.数据绑定 一般做程序设计,很少是使用json文件直接绑定数据.基本上我们都是使用编程语言进行 ...

  7. bootstrap table表格属性、列属性、事件、方法

    留存一份,原文地址http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 表格参数 表格的参数定义在 jQuery.fn.bootst ...

  8. Bootstrap Table列宽拖动的方法

    在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table实现的,要求能利用拖动改变列宽,现将实现的过程记录如下: 1. Bootstrap Table可拖动,需要用到它 ...

  9. statpot:使用mongo+bootstrap+highcharts做统计报表

    最近做了一个统计项目,这个统计项目大致的需求是统计接口的访问速度.客户端会调用一个接口来记录接口的访问情况,我的需求就需要分析这些数据,然后做出个统计报表. 需求实现 最初的时候想着每天把这些接口访问 ...

随机推荐

  1. codeforces 1060 D

    https://codeforces.com/contest/1060/problem/D 题意:你可以用1个及以上的圆桌,给n个人排座位,每个人左边需要有Li个空凳子,右边需要有Ri个空凳子,问你最 ...

  2. Java实现十进制数转十六进制数

    Now~Let's begin our second question~ 如何利用Java语言将十进制数字转换成十六进制数字呢? 我第一次编码出来的效果是酱紫的~ /** * */ package c ...

  3. SynchronizationContext.Post方法 代替

    http://www.codeproject.com/KB/threads/SynchronizationContext.aspx看吧,不好,就将就的看下我的吧,呵呵!(没有直接翻译,不过大概的思路相 ...

  4. 自旋锁、排队自旋锁、MCS锁、CLH锁

    转载自:http://coderbee.net/index.php/concurrent/20131115/577 自旋锁(Spin lock) 自旋锁是指当一个线程尝试获取某个锁时,如果该锁已被其他 ...

  5. GoogleMap在js中的应用

    <html> <head> <meta name="viewport" content="initial-scale=1.0, user-s ...

  6. （转）HTTP请求中URL地址的编码和解码

    HTTP请求中,类似   http%3A%2F%2Fwww.baidu.com%2Fcache%2Fuser%2Fhtml%2Fv3Jump.html  的地址 如何解码成    http://www ...

  7. 小白科普之JavaScript的DOM模型

    微信公众号“前端大全”推送了一篇名为“通俗易懂的来讲讲DOM”的文章,把javascript原生DOM相关内容讲解的很详细.仔细读了一遍,觉得整理总结的不错,对自己也很使用,所以把内容整理过来,并根据 ...

  8. appium===元素定位

    一.常用识别元素的工具 uiautomator:Android SDK自带的一个工具,在tools目录下 monitor:Android SDK自带的一个工具,在tools目录下 Appium Ins ...

  9. [ Python - 3 ] python3.5中不同的读写模式

    r 只能读.r+可读可写,不会创建不存在的文件.如果直接写文件,则从顶部开始写,覆盖之前此位置的内容,如果先读后写,则会在文件最后追加内容.w+ 可读可写 如果文件存在 则覆盖整个文件不存在则创建w ...

  10. src2中的alpha融合ROI

    #include <cv.h> #include <highgui.h> int main(int argc, char** argv) { IplImage *src1,*s ...