SpringBoot重点详解--使用BootstrapTable进行分页展示
目录
前端HTML页面
后台Java辅助代码
Mongodb分页实现
Mybatis分页实现
分页页面展示
前端HTML页面
BootstrapTable分页
demo.js 内容如下：
$(function() {
load();
});
function load() {
$('#exampleTable').bootstrapTable({
url : "/demo/load/data", // 请求的后台URL（*）
method : 'get', // 请求方式：get/post（*）
showRefresh : false, // 是否显示刷新按钮
showToggle : false, // 是否显示详细视图和列表视图的切换按钮
showColumns : false, // 是否显示列操作按钮
detailView : false, // 是否显示详细视图
striped : true, // 设置为true会有隔行变色效果
dataType : "json", // 服务器返回的数据类型
pagination : true, // 设置为true会在底部显示分页条
// queryParamsType : "limit",
// 设置为limit则会发送符合RESTFull格式的参数
singleSelect : true, // 设置为true将禁止多选
clickToSelect : true, // 是否启用点击选中行
// contentType : "application/x-www-form-urlencoded",
// 发送到服务器的数据编码类型
pageSize : 10, // 如果设置了分页，每页数据条数
pageNumber : 1, // 如果设置了分布，首页页码
search : false, // 是否显示搜索框
sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者 "server"
queryParams : function(params) {
return {
// 说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
limit : params.limit,
pageSize : 10,
offset : params.offset,
search : params.search,
sort : "age",
order : "DESC",
name : "user"
};
},
// 请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
// queryParamsType = 'limit' ,返回参数必须包含
// limit, offset, search, sort, order 否则, 需要包含:
// pageSize, pageNumber, searchText, sortName,
// sortOrder.
// 返回false将会终止请求
columns : [ {
title : '序号',
field : 'id',
align : 'left',
valign : 'center',
width : '10%',
formatter : function(value, row, index) {
return index + 1;
}
}, {
title : '用户ID',
field : 'id',
align : 'left',
valign : 'center',
width : '20%'
}, {
title : '用户姓名',
field : 'name',
align : 'left',
valign : 'center',
width : '50%',
cellStyle : function(value, row, index) {
return {
css : {
"word-wrap" : "break-word",
"word-break" : "normal"
}
};
}
}, {
title : '用户年龄',
field : 'age',
align : 'left',
valign : 'center',
width : '20%'
}]
});
}
后台Java辅助代码
在此我们分别对 MongoTemplate 和 Mybatis 的分页方法进行举例：
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.pengjunlee.common.utils.PageUtils;
import com.pengjunlee.common.utils.Query;
import com.pengjunlee.dao.MongoDao;
import com.pengjunlee.domain.UserEntity;
import com.pengjunlee.service.MysqlService;
@Controller
@RequestMapping("/demo")
public class DemoController {
@Autowired
MongoDao mongoDao;
@Autowired
MysqlService mysqlService;
@GetMapping("/index")
public String index() {
return "index";
}
// 两个 /load/data 二选一
@ResponseBody
@GetMapping("/load/data")
public PageUtils loadFromMongo(@RequestParam Map params) {
for (Map.Entry entry : params.entrySet()) {
System.out.println(entry.getKey() + " : " + entry.getValue());
}
PageUtils pageUtils = mongoDao.pageUserByCond(params);
return pageUtils;
}
// 两个 /load/data 二选一
@GetMapping("/load/data")
@ResponseBody
PageUtils loadFromMysql(@RequestParam Map params) {
Query query = new Query(params);
List userList = mysqlService.list(query);
int total = mysqlService.count(query);
PageUtils pageUtil = new PageUtils(userList, total);
return pageUtil;
}
}
PageUtils 是一个分页查询结果的封装类：
import java.io.Serializable;
import java.util.List;
public class PageUtils implements Serializable {
private static final long serialVersionUID = 1L;
private int total;
private List rows;
public PageUtils(List list, int total) {
this.rows = list;
this.total = total;
}
public int getTotal() {
return total;
}
public void setTotal(int total) {
this.total = total;
}
public List getRows() {
return rows;
}
public void setRows(List rows) {
this.rows = rows;
}
}Query 是一个分页查询条件的封装类：
import java.util.LinkedHashMap;
import java.util.Map;
public class Query extends LinkedHashMap {
private static final long serialVersionUID = 1L;
// 偏移页数
private int offset;
// 每页条数
private int limit;
public Query(Map params) {
this.putAll(params);
// 分页参数
this.offset = Integer.parseInt(params.get("offset").toString());
this.limit = Integer.parseInt(params.get("limit").toString());
this.put("offset", offset);
this.put("page", offset / limit + 1);
this.put("limit", limit);
}
public int getOffset() {
return offset;
}
public void setOffset(int offset) {
this.put("offset", offset);
}
public int getLimit() {
return limit;
}
public void setLimit(int limit) {
this.limit = limit;
}
}
定义的用户实体类 UserEntity 代码如下：
import java.io.Serializable;
public class UserEntity implements Serializable {
private static final long serialVersionUID = 1L;
private String id;
private String name;
private Integer age;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
}Mongodb分页实现
import java.util.Map;
import com.pengjunlee.common.utils.PageUtils;
import com.pengjunlee.domain.UserEntity;
public interface MongoDao {
void upsertUser(UserEntity user);
PageUtils pageUserByCond(Map params);
} import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Sort;
import org.springframework.data.domain.Sort.Direction;
import org.springframework.data.mongodb.core.MongoTemplate;
import org.springframework.data.mongodb.core.query.Criteria;
import org.springframework.data.mongodb.core.query.Query;
import org.springframework.data.mongodb.core.query.Update;
import org.springframework.stereotype.Component;
import com.pengjunlee.common.utils.PageUtils;
import com.pengjunlee.dao.MongoDao;
import com.pengjunlee.domain.UserEntity;
@Component
public class MongoDaoImpl implements MongoDao {
@Autowired
private MongoTemplate mongoTemplate;
@Override
public void upsertUser(UserEntity user) {
Query query = new Query(Criteria.where("id").is(user.getId()));
Update update = Update.update("id", user.getId());
if (StringUtils.isNotBlank(user.getName())) {
update.set("name", user.getName());
}
if (null != user.getAge()) {
update.set("age", user.getAge());
}
mongoTemplate.upsert(query, update, UserEntity.class);
}
@Override
public PageUtils pageUserByCond(Map params) {
int offset = 0;
int limit = 10;
if (null != params) {
if (StringUtils.isNotBlank(params.get("offset").toString())) {
offset = Integer.parseInt(params.get("offset").toString());
}
if (StringUtils.isNotBlank(params.get("limit").toString())) {
limit = Integer.parseInt(params.get("limit").toString());
}
}
Query query = null;
if (StringUtils.isNotBlank(params.get("name").toString())) {
query = new Query(Criteria.where("name").is(params.get("name").toString()));
} else {
query = new Query(new Criteria());
}
int count = mongoTemplate.find(query, UserEntity.class).size();
if (StringUtils.isNotBlank(params.get("sort").toString())
&& StringUtils.isNotBlank(params.get("order").toString())) {
query.with(new Sort(Direction.valueOf(params.get("order").toString().toUpperCase()),
params.get("sort").toString()));
}
query.skip(offset);
query.limit(limit);
List users = mongoTemplate.find(query, UserEntity.class);
PageUtils pageUtils = new PageUtils(new ArrayList<>(), 0);
pageUtils.setTotal(count);
pageUtils.setRows(users);
return pageUtils;
}
} Mybatis分页实现
import java.util.List;
import java.util.Map;
import com.pengjunlee.domain.UserEntity;
public interface MysqlService {
List list(Map params);
int count(Map params);
}
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.pengjunlee.dao.MysqlDao;
import com.pengjunlee.domain.UserEntity;
import com.pengjunlee.service.MysqlService;
@Service
public class MysqlServiceImpl implements MysqlService {
@Autowired
private MysqlDao mysqlDao;
@Override
public List list(Map params) {
return mysqlDao.list(params);
}
@Override
public int count(Map params) {
return mysqlDao.count(params);
}
}
import java.util.List;
import java.util.Map;
import org.apache.ibatis.annotations.Mapper;
import com.pengjunlee.domain.UserEntity;
@Mapper
public interface MysqlDao {
List list(Map params);
int count(Map params);
}
分页页面展示
