Bootsrap Table表格分页

一 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> 企业名称/姓名</th>
<th data-field="mobile" ><span class="glyphicon glyphicon-phone"></span> 手机号</th>
<!-- <th data-field="email" ><span class="glyphicon glyphicon-envelope"></span> 邮箱</th> -->
<th data-field="code" data-formatter="FormatterNoOrCode"> <span class="glyphicon glyphicon-credit-card"></span> 身份证/组织机构代码证</th>
<th data-field="company" data-formatter="FormatterOrgan" ><span class="glyphicon glyphicon-home" ></span> 所属公司</th>
<th data-field="createDate" ><span class="glyphicon glyphicon-calendar"></span> 导入日期</th>
<th data-field="tagName" ><span class="glyphicon glyphicon-list"></span> 用户组</th>
<th data-field="status" data-formatter="FormatterStatus"><span class="glyphicon glyphicon-th-large"></span> 实名状态</th>
<th data-field="" data-formatter="FormatterOperate" class="col-md-2"><span class="glyphicon glyphicon-briefcase"></span> 操作</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/

　　希望大家相互指正，有需要共同讨论！