1前台页面
<table id="table1" data-classes="table table-hover " data-search="true" data-show-refresh="true" data-show-columns="true"></table>
2后台初始化列表
function initTable() { $('#table1') .bootstrapTable( { method : 'post',// 请求方式(*) url : 'list',// 请求后台的URL(*) cache : false, // 是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) sortable : false, // 是否启用排序 contentType: 'application/x-www-form-urlencoded', pagination : true,// 是否显示分页(*) queryParamsType: "limit",//查询参数组织方式 pageSize : 10, // 每页的记录行数(*) pageList : [ 5, 10, 15 ], // 可供选择的每页的行数(*) search:true,//搜索框 pageNumber:1, striped : true, // 表格显示条纹 silent: true, strictSearch:true,// showColumns:true,// 是否显示所有的列 showRefresh:true,//刷新 showToggle : true, // 是否显示详细视图和列表视图的切换按钮 cardView : false, // 是否显示详细视图 detailView : false, // 是否显示父子表 toolbar : '#toolbar', clickToSelect : true, sidePagination : 'server', queryParams : function(params){ console.info(params.offset); return params; }, columns : [ {field : 'stat', width : 2, checkbox : true }, { field : 'id', title : 'id', align : 'left', valign : 'middle', width : 200, sortable : true, visible:false } , { field : 'username', title : '姓名', align : 'left', valign : 'middle', width : 200, sortable : true } , { field : 'password', title : '密码', align : 'left', valign : 'middle', width : 50, sortable : true }], onClickRow : function(row, $element){ //console.info(row); }, onDblClickRow : function(row, $element){//双击 //console.info(row); }, onLoadSuccess: function(data){ //加载成功时执行 console.info(JSON.stringify(data)); console.info("加载成功"); }, onLoadError: function(){ //加载失败时执行 console.info("加载数据失败"); } }) }
3、bootstrap会向后台传递limit、offset、用来分页 传递向后台
queryParams : function (params) { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 var temp = { rows: params.limit, //页面大小 page: (params.offset / params.limit) + 1, //页码 sort: params.sort, //排序列名 sortOrder: params.order //排位命令(desc,asc) }; return temp; },
4后台写实体类接收参数
package com.demo.pojo; public class PageHelper { private int offset;// 当前记录 private int limit;// 显示几条 private String sort;// 排序字段 private String order;// asc/desc public String getSort() { return sort; } public void setSort(String sort) { this.sort = sort; } public String getOrder() { return order; } public void setOrder(String order) { this.order = order; } public int getOffset() { return offset; } public void setOffset(int offset) { this.offset = offset; } public int getLimit() { return limit; } public void setLimit(int limit) { this.limit = limit; } }
package com.demo.pojo; import java.util.List; @SuppressWarnings("rawtypes") public class BsTable { private Long total; private List rows; public Long getTotal() { return total; } public void setTotal(Long total) { this.total = total; } public List getRows() { return rows; } public void setRows(List rows) { this.rows = rows; } }
controller
@RequestMapping(value = "/list") @ResponseBody public Object list(PageHelper ph) { return userService.list(ph); }
dao层进行分页查询 返回自定义的table类型
public BsTable list(PageHelper ph) { BsTable table = new BsTable(); String hql = new String("from User where deleted=0 "); List list=userDao.find(hql.toString(), ph.getOffset(), ph.getLimit()); table.setTotal(userDao.count("select count(*)"+hql)); table.setRows(list); return table; }