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

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

目录

前端HTML页面

后台Java辅助代码

Mongodb分页实现

Mybatis分页实现

分页页面展示

前端HTML页面

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width" />
  5. <title>BootstrapTable分页</title>
  7. <link rel="stylesheet" href="/css/bootstrap.min.css" />
  8. <link rel="stylesheet" href="/css/bootstrap-table.min.css" />
  9. <script type="text/javascript" src="/js/jquery-1.11.1.min.js"></script>
  10. </head>
  11. <body>
  13.     <div class="bootstrap-table">
  14.         <table id="exampleTable" data-mobile-responsive="true">
  15.         </table>
  16.     </div>
  18.     <script type="text/javascript" src="/js/bootstrap-table.min.js"></script>
  19.     <script type="text/javascript" src="/js/bootstrap.min.js"></script>
  20.     <script type="text/javascript" src="/js/demo.js"></script>
  21. </body>
  22. </html>

demo.js 内容如下：

  1. $(function() {
  2.     load();
  3. });
  5. function load() {
  6.     $('#exampleTable').bootstrapTable({
  7.         url : "/demo/load/data", // 请求的后台URL（*）
  8.         method : 'get', // 请求方式：get/post（*）
  9.         showRefresh : false, // 是否显示刷新按钮
  10.         showToggle : false, // 是否显示详细视图和列表视图的切换按钮
  11.         showColumns : false, // 是否显示列操作按钮
  12.         detailView : false, // 是否显示详细视图
  13.         striped : true, // 设置为true会有隔行变色效果
  14.         dataType : "json", // 服务器返回的数据类型
  15.         pagination : true, // 设置为true会在底部显示分页条
  16.         // queryParamsType : "limit",
  17.         // 设置为limit则会发送符合RESTFull格式的参数
  18.         singleSelect : true, // 设置为true将禁止多选
  19.         clickToSelect : true, // 是否启用点击选中行
  21.         // contentType : "application/x-www-form-urlencoded",
  22.         // 发送到服务器的数据编码类型
  23.         pageSize : 10, // 如果设置了分页，每页数据条数
  24.         pageNumber : 1, // 如果设置了分布，首页页码
  25.         search : false, // 是否显示搜索框
  27.         sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者 "server"
  28.         queryParams : function(params) {
  29.             return {
  30.                 // 说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
  31.                 limit : params.limit,
  32.                 pageSize : 10,
  33.                 offset : params.offset,
  34.                 search : params.search,
  35.                 sort : "age",
  36.                 order : "DESC",
  37.                 name : "user"
  38.             };
  39.         },
  40.         // 请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
  41.         // queryParamsType = 'limit' ,返回参数必须包含
  42.         // limit, offset, search, sort, order 否则, 需要包含:
  43.         // pageSize, pageNumber, searchText, sortName,
  44.         // sortOrder.
  45.         // 返回false将会终止请求
  46.         columns : [ {
  47.             title : '序号',
  48.             field : 'id',
  49.             align : 'left',
  50.             valign : 'center',
  51.             width : '10%',
  52.             formatter : function(value, row, index) {
  53.                 return index + 1;
  54.             }
  56.         }, {
  57.             title : '用户ID',
  58.             field : 'id',
  59.             align : 'left',
  60.             valign : 'center',
  61.             width : '20%'
  63.         }, {
  64.             title : '用户姓名',
  65.             field : 'name',
  66.             align : 'left',
  67.             valign : 'center',
  68.             width : '50%',
  69.             cellStyle : function(value, row, index) {
  70.                 return {
  71.                     css : {
  72.                         "word-wrap" : "break-word",
  73.                         "word-break" : "normal"
  74.                     }
  75.                 };
  76.             }
  78.         }, {
  79.             title : '用户年龄',
  80.             field : 'age',
  81.             align : 'left',
  82.             valign : 'center',
  83.             width : '20%'
  85.         }]
  86.     });
  87. }

后台Java辅助代码

在此我们分别对 MongoTemplate 和 Mybatis 的分页方法进行举例： 

  1. import java.util.List;
  2. import java.util.Map;
  4. import org.springframework.beans.factory.annotation.Autowired;
  5. import org.springframework.stereotype.Controller;
  6. import org.springframework.web.bind.annotation.GetMapping;
  7. import org.springframework.web.bind.annotation.RequestMapping;
  8. import org.springframework.web.bind.annotation.RequestParam;
  9. import org.springframework.web.bind.annotation.ResponseBody;
  11. import com.pengjunlee.common.utils.PageUtils;
  12. import com.pengjunlee.common.utils.Query;
  13. import com.pengjunlee.dao.MongoDao;
  14. import com.pengjunlee.domain.UserEntity;
  15. import com.pengjunlee.service.MysqlService;
  17. @Controller
  18. @RequestMapping("/demo")
  19. public class DemoController {
  20.     @Autowired
  21.     MongoDao mongoDao;
  23.     @Autowired
  24.     MysqlService mysqlService;
  26.     @GetMapping("/index")
  27.     public String index() {
  28.         return "index";
  29.     }
  31.     // 两个 /load/data 二选一
  32.     @ResponseBody
  33.     @GetMapping("/load/data") 
  34.     public PageUtils loadFromMongo(@RequestParam Map<String, Object> params) {
  35.         for (Map.Entry<String, Object> entry : params.entrySet()) {
  36.             System.out.println(entry.getKey() + " : " + entry.getValue());
  37.         }
  38.         PageUtils pageUtils = mongoDao.pageUserByCond(params);
  39.         return pageUtils;
  40.     }
  42.     // 两个 /load/data 二选一
  43.     @GetMapping("/load/data")
  44.     @ResponseBody
  45.     PageUtils loadFromMysql(@RequestParam Map<String, Object> params) {
  46.         Query query = new Query(params);
  47.         List<UserEntity> userList = mysqlService.list(query);
  48.         int total = mysqlService.count(query);
  49.         PageUtils pageUtil = new PageUtils(userList, total);
  50.         return pageUtil;
  51.     }
  53. }

PageUtils 是一个分页查询结果的封装类： 

  1. import java.io.Serializable;
  2. import java.util.List;
  4. public class PageUtils implements Serializable {
  5.     private static final long serialVersionUID = 1L;
  6.     private int total;
  7.     private List<?> rows;
  9.     public PageUtils(List<?> list, int total) {
  10.         this.rows = list;
  11.         this.total = total;
  12.     }
  14.     public int getTotal() {
  15.         return total;
  16.     }
  18.     public void setTotal(int total) {
  19.         this.total = total;
  20.     }
  22.     public List<?> getRows() {
  23.         return rows;
  24.     }
  26.     public void setRows(List<?> rows) {
  27.         this.rows = rows;
  28.     }
  30. }

Query 是一个分页查询条件的封装类： 

  1. import java.util.LinkedHashMap;
  2. import java.util.Map;
  4. public class Query extends LinkedHashMap<String, Object> {
  5.     private static final long serialVersionUID = 1L;
  6.     // 偏移页数
  7.     private int offset;
  8.     // 每页条数
  9.     private int limit;
  11.     public Query(Map<String, Object> params) {
  12.         this.putAll(params);
  13.         // 分页参数
  14.         this.offset = Integer.parseInt(params.get("offset").toString());
  15.         this.limit = Integer.parseInt(params.get("limit").toString());
  16.         this.put("offset", offset);
  17.         this.put("page", offset / limit + 1);
  18.         this.put("limit", limit);
  19.     }
  21.     public int getOffset() {
  22.         return offset;
  23.     }
  25.     public void setOffset(int offset) {
  26.         this.put("offset", offset);
  27.     }
  29.     public int getLimit() {
  30.         return limit;
  31.     }
  33.     public void setLimit(int limit) {
  34.         this.limit = limit;
  35.     }
  36. }

定义的用户实体类 UserEntity 代码如下： 

  1. import java.io.Serializable;
  3. public class UserEntity implements Serializable {
  5.     private static final long serialVersionUID = 1L;
  7.     private String id;
  8.     private String name;
  10.     private Integer age;
  12.     public String getId() {
  13.         return id;
  14.     }
  16.     public void setId(String id) {
  17.         this.id = id;
  18.     }
  20.     public String getName() {
  21.         return name;
  22.     }
  24.     public void setName(String name) {
  25.         this.name = name;
  26.     }
  28.     public Integer getAge() {
  29.         return age;
  30.     }
  32.     public void setAge(Integer age) {
  33.         this.age = age;
  34.     }
  36. }

Mongodb分页实现

  1. import java.util.Map;
  3. import com.pengjunlee.common.utils.PageUtils;
  4. import com.pengjunlee.domain.UserEntity;
  6. public interface MongoDao {
  8.     void upsertUser(UserEntity user);
  10.     PageUtils pageUserByCond(Map<String, Object> params);
  11. }
  13. import java.util.ArrayList;
  14. import java.util.List;
  15. import java.util.Map;
  17. import org.apache.commons.lang3.StringUtils;
  18. import org.springframework.beans.factory.annotation.Autowired;
  19. import org.springframework.data.domain.Sort;
  20. import org.springframework.data.domain.Sort.Direction;
  21. import org.springframework.data.mongodb.core.MongoTemplate;
  22. import org.springframework.data.mongodb.core.query.Criteria;
  23. import org.springframework.data.mongodb.core.query.Query;
  24. import org.springframework.data.mongodb.core.query.Update;
  25. import org.springframework.stereotype.Component;
  27. import com.pengjunlee.common.utils.PageUtils;
  28. import com.pengjunlee.dao.MongoDao;
  29. import com.pengjunlee.domain.UserEntity;
  31. @Component
  32. public class MongoDaoImpl implements MongoDao {
  34.     @Autowired
  35.     private MongoTemplate mongoTemplate;
  37.     @Override
  38.     public void upsertUser(UserEntity user) {
  39.         Query query = new Query(Criteria.where("id").is(user.getId()));
  40.         Update update = Update.update("id", user.getId());
  41.         if (StringUtils.isNotBlank(user.getName())) {
  42.             update.set("name", user.getName());
  43.         }
  45.         if (null != user.getAge()) {
  46.             update.set("age", user.getAge());
  47.         }
  48.         mongoTemplate.upsert(query, update, UserEntity.class);
  50.     }
  52.     @Override
  53.     public PageUtils pageUserByCond(Map<String, Object> params) {
  54.         int offset = 0;
  55.         int limit = 10;
  56.         if (null != params) {
  58.             if (StringUtils.isNotBlank(params.get("offset").toString())) {
  59.                 offset = Integer.parseInt(params.get("offset").toString());
  60.             }
  61.             if (StringUtils.isNotBlank(params.get("limit").toString())) {
  62.                 limit = Integer.parseInt(params.get("limit").toString());
  63.             }
  64.         }
  66.         Query query = null;
  67.         if (StringUtils.isNotBlank(params.get("name").toString())) {
  68.             query = new Query(Criteria.where("name").is(params.get("name").toString()));
  69.         } else {
  70.             query = new Query(new Criteria());
  71.         }
  72.         int count = mongoTemplate.find(query, UserEntity.class).size();
  73.         if (StringUtils.isNotBlank(params.get("sort").toString())
  74.                 && StringUtils.isNotBlank(params.get("order").toString())) {
  75.             query.with(new Sort(Direction.valueOf(params.get("order").toString().toUpperCase()),
  76.                     params.get("sort").toString()));
  77.         }
  78.         query.skip(offset);
  79.         query.limit(limit);
  81.         List<UserEntity> users = mongoTemplate.find(query, UserEntity.class);
  82.         PageUtils pageUtils = new PageUtils(new ArrayList<>(), 0);
  83.         pageUtils.setTotal(count);
  84.         pageUtils.setRows(users);
  85.         return pageUtils;
  86.     }
  88. }

Mybatis分页实现

  1. import java.util.List;
  2. import java.util.Map;
  4. import com.pengjunlee.domain.UserEntity;
  6. public interface MysqlService {
  8.     List<UserEntity> list(Map<String, Object> params);
  10.     int count(Map<String, Object> params);
  12. }
  14. import java.util.List;
  15. import java.util.Map;
  17. import org.springframework.beans.factory.annotation.Autowired;
  18. import org.springframework.stereotype.Service;
  20. import com.pengjunlee.dao.MysqlDao;
  21. import com.pengjunlee.domain.UserEntity;
  22. import com.pengjunlee.service.MysqlService;
  24. @Service
  25. public class MysqlServiceImpl implements MysqlService {
  27.     @Autowired
  28.     private MysqlDao mysqlDao;
  30.     @Override
  31.     public List<UserEntity> list(Map<String, Object> params) {
  32.         return mysqlDao.list(params);
  33.     }
  35.     @Override
  36.     public int count(Map<String, Object> params) {
  37.         return mysqlDao.count(params);
  38.     }
  40. }
  42. import java.util.List;
  43. import java.util.Map;
  45. import org.apache.ibatis.annotations.Mapper;
  47. import com.pengjunlee.domain.UserEntity;
  49. @Mapper
  50. public interface MysqlDao {
  52.     List<UserEntity> list(Map<String, Object> params);
  54.     int count(Map<String, Object> params);
  55. }
  57. <?xml version="1.0" encoding="UTF-8"?>
  58. <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  60. <mapper namespace="com.pengjunlee.dao.MysqlDao">
  61.     <select id="list" resultType="com.pengjunlee.domain.UserEntity">
  62.         select
  63.         `id`,`name`,`age`
  64.         from
  65.         tbl_user
  66.         <where>
  67.             <if test="id != null"> and id = #{id} </if>
  68.             <if test="name != null and name != ''"> and name = #{name} </if>
  69.             <if test="age != null"> and age = #{age} </if>
  70.         </where>
  71.         <choose>
  72.             <when test="sort != null and sort.trim() != ''">
  73.                 order by ${sort} ${order}
  74.             </when>
  75.             <otherwise>
  76.                 order by id desc
  77.             </otherwise>
  78.         </choose>
  79.         <if test="offset != null and limit != null">
  80.             limit #{offset}, #{limit}
  81.         </if>
  82.     </select>
  84.     <select id="count" resultType="int">
  85.         select count(*) from tbl_user
  86.         <where>
  87.             <if test="id != null"> and id = #{id} </if>
  88.             <if test="name != null and name != ''"> and name = #{name} </if>
  89.             <if test="age != null"> and age = #{age} </if>
  90.         </where>
  91.     </select>
  92. </mapper>

分页页面展示

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlbmdqdW5sZWU_size_16_color_FFFFFF_t_70

发表评论

表情：
评论列表 （有 0 条评论，498人围观）

还没有评论，来说两句吧...

相关阅读