一 bootsrap简介

  Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

  它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。

  简介不介绍过多,相信用过的人都知道boostrap的好处。多浏览器兼容性、页面美观、提供一整套的样式解决方案、基于H5+CSS3,对移动应用提供了非常好的支持...

二 配置文件

<script src="../js/jquery.1.11.3.min.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="../js/bootstrap-table.js"></script>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/bootstrap-table.css" />

  boostrap基于jquery开发而成,需要在head中最先引入jquery,再进行其他boostrap的js包的引入。在bootsrap3以后,支持模块化导入包,针对自己使用的功能,导入必要的js包,可以有效的减少页面的资源加载量。

三 Boostrap Table配置

  html

  Boostrap通过解析服务端返回的json对象,与table的data-field进行比对,如果名字相同,则取对应的数据进行展现。

  可以通过data-formatter属性指定的js方法对服务端返回的数据进行相应的格式化,此例中使用了boostrap的图标,例如:<span class="glyphicon glyphicon-credit-card"></span>,不允许在boostrap图标的<span>标签内添加内容。

    <div class="table-responsive tableDIV">
<table class="table table-striped table-no-bordered table-hover"
id="accountTable" data-toggle="accountTable" data-height="400">
<thead>
<tr>
<th data-field="name" data-formatter="accFormatterName"><span class="glyphicon glyphicon-user"></span>&nbsp;企业名称/姓名</th>
<th data-field="mobile" ><span class="glyphicon glyphicon-phone"></span>&nbsp;手机号</th>
<!-- <th data-field="email" ><span class="glyphicon glyphicon-envelope"></span>&nbsp;邮箱</th> -->
<th data-field="code" data-formatter="FormatterNoOrCode"> <span class="glyphicon glyphicon-credit-card"></span>&nbsp;身份证/组织机构代码证</th>
<th data-field="company" data-formatter="FormatterOrgan" ><span class="glyphicon glyphicon-home" ></span>&nbsp;所属公司</th>
<th data-field="createDate" ><span class="glyphicon glyphicon-calendar"></span>&nbsp;导入日期</th>
<th data-field="tagName" ><span class="glyphicon glyphicon-list"></span>&nbsp;用户组</th>
<th data-field="status" data-formatter="FormatterStatus"><span class="glyphicon glyphicon-th-large"></span>&nbsp;实名状态</th>
<th data-field="" data-formatter="FormatterOperate" class="col-md-2"><span class="glyphicon glyphicon-briefcase"></span>&nbsp;操作</th>
<th data-field="accountUid" class="hidden"></th>
<th data-field="tagrefIds" class="hidden"></th>
<th data-field="tagId" class="hidden"></th>
</tr>
</thead>
</table>
</div>

  JS

  服务端分页需要指定sidePagination 值为true, 同时可以指定对应的查询参数,内置的分页查询参数包括offset、limit等。

   function getAccountTab() {
$("#accountTable").bootstrapTable({
method : 'get',
url : "../rest/api/account/query",
pagination : true,
pageList : [5, 8 ],
search : false,
showColumns : false,
sidePagination : "server", //服务端请求
queryParams : 'queryParams',
pageSize : 8,
pageNumber : 1,
clickToSelect : true,
singleSelect: true,
paginationFirstText : "第一页",
paginationPreText : "上一页",
paginationNextText : "下一页",
paginationLastText : "最后一页",
onLoadSuccess : function(data) { },
onLoadError : function(data) {
},
onCheck: function (row) { },
onCheckAll: function(rows){ },
onCheckSome: function(rows){ },
onUncheck:function(row){ },
onUncheckAll:function(){
delArray = new Array();
} });
}
//设置传入参数
function queryParams(param) {
return {
limit : param.limit,
offset : param.offset,
name : $('#accountName').val(),
mobile : $('#accountMobile').val(),
email : $('#accountEmail').val(),
organize : $('#accountOrganize').val(),
type : $('#accountType option:selected').val(),
tagId: $('#user_tag option:selected').val()
};
}

  后端

    @GET
@Path("/query")
@Produces(MediaType.APPLICATION_JSON)
public String queryAccount(@QueryParam("limit") final int limit,
@QueryParam("offset") final int offset,
@QueryParam("name") final String name,
@QueryParam("mobile") final String mobile,
@QueryParam("email") final String email,
@QueryParam("organize") final String organize,
@QueryParam("order") final String order,
@QueryParam("type") final int type,
@QueryParam("tagId") final String tagId) {
final String accountUid = (String) request.getSession().getAttribute(
ACCOUNTUID);
final BasePageResponse response = this.accountService
.findPageBySelector(offset, limit, type, name, email, 0,
mobile, accountUid, tagId);
final List<AccountManagerData> accs = BeanConvertUtil
.getAccountBeans(response);
final JsonConfig jsonConfig = new JsonConfig();
jsonConfig.registerJsonValueProcessor(Date.class,
new JsonDateValueProcessor("yyyy-MM-dd HH:mm:ss"));
final JSONArray array = JSONArray.fromObject(accs, jsonConfig);
final JSONObject jsonObj = new JSONObject();
jsonObj.put("rows", array.toString());
jsonObj.put("total", response.getTotalCount());
return jsonObj.toString();
}

  采用jersey进行数据接收以及业务处理返回相应数据,使用struts2或者springMVC也同样可以,只需要按照boostrap的要求,对返回的json对象中包含rows、total这两项数据。

  对应实现的效果

  

四 资料下载

  Boostrap-table下载,包括table js以及相对应的boostrap-table的API,以及对应的部分示例。

  http://bootstrap-table.wenzhixin.net.cn/examples/

  Boostrap中文网官网、API

  http://www.bootcss.com/

  希望大家相互指正,有需要共同讨论!

  

Bootsrap Table表格分页的更多相关文章

  1. MySQL+Service+Servlet+Jsp实现Table表格分页展示数据

    下面以一个示例讲解如何使用MySQL+Service+Servlet+Jsp实现Table表格分页展示数据: eg:请假管理系统 要求如下: 一.打开首页页面, 访问查询请假记录的 servlet , ...

  2. bootstrap table + spring + springmvc + mybatis 实现从前端到后端的表格分页

    1.使用准备 前台需要的资源文件,主要有Bootstrap3相关css.js以及bootstrap Table相关css.js: <-- 样式 --> <link rel=" ...

  3. 基于Vue.js的表格分页组件

    有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...

  4. [js开源组件开发]table表格组件

    table表格组件 表格的渲染组件,demo请点击http://lovewebgames.com/jsmodule/table.html,git源码请点击https://github.com/tian ...

  5. Vue.js的表格分页组件

    转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更 ...

  6. Angular.js+Bootstrap实现表格分页

    最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页. 先上图看看最终结果: 不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功 ...

  7. 【转】基于jquery的无刷新表格分页

    效果图 css样式 <style> html,body{margin: 0;padding:0} a:focus {outline: none;} /* 通用表格显示 */ table, ...

  8. ASP.NET MVC 之表格分页

    简单效果图:(框架:MVC+NHibernate) 要点: (1)首先建立表格分页Model(GridModel.cs) (2)然后建立数据展示页(PageCloth.cshtml) (3)再建分页版 ...

  9. layui table 表格模板按钮实例

    这是个是全部的jsp 页面: <%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8& ...

随机推荐

  1. android studio中配置X5 webview时的一个坑

    在接入X5的第二步中,需要配置so文件,这里说一下遇到的坑 1. 需要把demo下载回来,不然你找不到so文件,找到so文件后放到自己相对应的目录下边,自己里面那个目录也没有,所以和文件夹一起复制过去 ...

  2. win10下安装配置mysql-8.0.13--实战可用

    1.下载mysql-8.0.13安装包 1 https://dev.mysql.com/downloads/mysql/ 选择zip安装包下载就好. 2.解压到你要安装的目录 3.创建my.ini配置 ...

  3. JS万金油的类型判断方法

    Object.prototype.toString.call(data).slice(8, -1).toLowerCase();

  4. ssh 免密码远程登录

    背景: 公司有两台服务器A与B,经常会碰到代码中的配置文件不一致的情况...............,为了反面让两台服务器配置统一,所以需要写个shell脚本,用到的linux命令主要是scp 1.在 ...

  5. 「BZOJ 1791」「IOI 2008」Island「基环树」

    题意 求基环树森林所有基环树的直径之和 题解 考虑的一个基环树的直径,只会有两种情况,第一种是某个环上结点子树的直径,第二种是从两个环上结点子树内的最深路径,加上环上这两个结点之间的较长路径. 那就找 ...

  6. json解析(自动判断是jsonArray和jsonObject)

    因为想做一个接口自动化框架,已经实现了接口的访问和连接及获取接口返回的json数据,但json数据的解析是个麻烦的事情,所以写一个简单的版本记录一下.后续会进行优化,实现方法分离以及自动识别循环解析返 ...

  7. RxJS的基础

    RxJS是一个强大的Reactive编程库,提供了强大的数据流组合与控制能力,但是其学习门槛一直很高,本次分享期望从一些特别的角度解读它在业务中的使用,而不是从API角度去讲解. RxJS简介 通常, ...

  8. 转载文章 MySQL与Oracle的区别

    MySQL与Oracle的区别   1.  Oracle是大型数据库而Mysql是中小型数据库,Oracle市场占有率达40%,Mysql只有20%左右,同时Mysql是开源的而Oracle价格非常高 ...

  9. [bzoj2743][HEOI2012]采花(树状数组)

    题目描述 萧薰儿是古国的公主,平时的一大爱好是采花. 今天天气晴朗,阳光明媚,公主清晨便去了皇宫中新建的花园采花. 花园足够大,容纳了n朵花,花有c种颜色(用整数1-c表示),且花是排成一排的,以便于 ...

  10. Python Flask-web表单

    Flask-WTF扩展可以把处理web表单的过程变成一种愉悦的体验. 一.跨站请求伪造保护 默认情况下,Flask-WTF能够保护所有表单免受跨站请求伪造的攻击.恶意网站把请求发送到被攻击者已登录的网 ...