SpringBoot重点详解--使用BootstrapTable进行分页展示

谁借莪１个温暖的怀抱￠ 2022-04-02 09:10 320阅读 0赞

**目录**

前端HTML页面

后台Java辅助代码

Mongodb分页实现

Mybatis分页实现

分页页面展示

--------------------

# 前端HTML页面 #

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width" />
    <title>BootstrapTable分页</title>
    
    <link rel="stylesheet" href="/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/bootstrap-table.min.css" />
    <script type="text/javascript" src="/js/jquery-1.11.1.min.js"></script>
    </head>
    <body>
    
    	<div class="bootstrap-table">
    		<table id="exampleTable" data-mobile-responsive="true">
    		</table>
    	</div>
    
    	<script type="text/javascript" src="/js/bootstrap-table.min.js"></script>
    	<script type="text/javascript" src="/js/bootstrap.min.js"></script>
    	<script type="text/javascript" src="/js/demo.js"></script>
    </body>
    </html>

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<String, Object> params) {
    		for (Map.Entry<String, Object> 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<String, Object> params) {
    		Query query = new Query(params);
    		List<UserEntity> 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<String, Object> {
    	private static final long serialVersionUID = 1L;
    	// 偏移页数
    	private int offset;
    	// 每页条数
    	private int limit;
    
    	public Query(Map<String, Object> 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<String, Object> 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<String, Object> 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<UserEntity> 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<UserEntity> list(Map<String, Object> params);
    
    	int count(Map<String, Object> 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<UserEntity> list(Map<String, Object> params) {
    		return mysqlDao.list(params);
    	}
    
    	@Override
    	public int count(Map<String, Object> 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<UserEntity> list(Map<String, Object> params);
    
    	int count(Map<String, Object> params);
    }

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    
    <mapper namespace="com.pengjunlee.dao.MysqlDao">
    	<select id="list" resultType="com.pengjunlee.domain.UserEntity">
    		select
    		`id`,`name`,`age`
    		from
    		tbl_user
    		<where>
    			<if test="id != null"> and id = #{id} </if>
    			<if test="name != null and name != ''"> and name = #{name} </if>
    			<if test="age != null"> and age = #{age} </if>
    		</where>
    		<choose>
    			<when test="sort != null and sort.trim() != ''">
    				order by ${sort} ${order}
    			</when>
    			<otherwise>
    				order by id desc
    			</otherwise>
    		</choose>
    		<if test="offset != null and limit != null">
    			limit #{offset}, #{limit}
    		</if>
    	</select>
    
    	<select id="count" resultType="int">
    		select count(*) from tbl_user
    		<where>
    			<if test="id != null"> and id = #{id} </if>
    			<if test="name != null and name != ''"> and name = #{name} </if>
    			<if test="age != null"> and age = #{age} </if>
    		</where>
    	</select>
    </mapper>

# 分页页面展示 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmdqdW5sZWU_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmdqdW5sZWU_size_16_color_FFFFFF_t_70]: /images/20220402/bfdf08a1cea54a479bc40ad7efc3c7bf.png