bootstrap table分页（前后端两种方式实现）

原文链接：http://blog.csdn.net/qq_37936542/article/details/79163125

bootstrap table分页有那种方式：

前端分页：一次性从数据库查询所有的数据，在前端进行分页（数据量小的时候或者逻辑处理不复杂的话可以使用前端分页）

服务器分页：每次只查询当前页面加载所需要的那几条数据

一：引入js、css文件

[html] view plain copy
  1. <!-- 引入的css文件  -->    
  2. <link href="../css/bootstrap.min.css" rel="stylesheet" />  
  3. <link href="../css/bootstrap-table.min.css" rel="stylesheet">  
  4. <!-- 引入的js文件 -->  
  5. <script src="../js/jquery.min.js"></script>  
  6. <script src="../js/bootstrap.min.js"></script>  
  7. <script src="../js/bootstrap-table.min.js"></script>  
  8. <script src="../js/bootstrap-table-zh-CN.min.js"></script>  


二：html页面
[html] view plain copy
  1. <div class="panel panel-default">  
  2.     <div class="panel-heading">  
  3.         查询条件  
  4.     </div>  
  5.     <div class="panel-body form-group" style="margin-bottom:0px;">  
  6.         <label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">姓名：</label>  
  7.         <div class="col-sm-2">  
  8.             <input type="text" class="form-control" name="Name" id="search_name"/>  
  9.         </div>  
  10.         <label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">手机号：</label>  
  11.         <div class="col-sm-2">  
  12.             <input type="text" class="form-control" name="Name" id="search_tel"/>  
  13.         </div>  
  14.         <div class="col-sm-1 col-sm-offset-4">  
  15.             <button class="btn btn-primary" id="search_btn">查询</button>  
  16.         </div>  
  17.      </div>  
  18. </div>  
  19. <table id="mytab" class="table table-hover"></table>  
  20. <div id="toolbar" class="btn-group pull-right" style="margin-right: 20px;">  
  21.      <button id="btn_edit" type="button" class="btn btn-default" style="display: none; border-radius: 0">  
  22.          <span class="glyphicon glyphicon-pencil" aria-hidden="true" ></span>修改  
  23.      </button>  
  24.       <button id="btn_delete" type="button" class="btn btn-default" style="display: none;">  
  25.           <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除  
  26.       </button>  
  27.       <button id="btn_add" type="button" class="btn btn-default">  
  28.           <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增  
  29.       </button>  
  30.  </div>  


三：js代码
[html] view plain copy
  1. $('#mytab').bootstrapTable({  
  2.     method: 'post',  
  3.     contentType: "application/x-www-form-urlencoded",//当请求方法为post的时候,必须要有！！！！  
  4.     url:ROOT+"user/getUserListPage",//请求路径  
  5.     striped: true, //是否显示行间隔色  
  6.     pageNumber: 1, //初始化加载第一页  
  7.     pagination:true,//是否分页  
  8.     sidePagination:'server',//server:服务器端分页|client：前端分页  
  9.     pageSize:10,//单页记录数  
  10.     pageList:[5,10,20,30],//可选择单页记录数  
  11.     showRefresh:true,//刷新按钮  
  12.     queryParams : function (params) {//上传服务器的参数  
  13.         var temp = {//如果是在服务器端实现分页，limit、offset这两个参数是必须的  
  14.             limit : params.limit, // 每页显示数量  
  15.             offset : params.offset, // SQL语句起始索引  
  16.             //page: (params.offset / params.limit) + 1,   //当前页码  
  17.               
  18.             Name:$('#search_name').val(),  
  19.             Tel:$('#search_tel').val()  
  20.         };  
  21.         return temp;  
  22.     },  
  23.     columns:[  
  24.         {  
  25.             title:'登录名',  
  26.             field:'loginName',  
  27.             sortable:true  
  28.         },  
  29.         {  
  30.             title:'姓名',  
  31.             field:'name',  
  32.             sortable:true  
  33.         },  
  34.         {  
  35.             title:'手机号',  
  36.             field:'tel',  
  37.         },  
  38.         {  
  39.             title:'性别',  
  40.             field:'sex',  
  41.             formatter: formatSex,//对返回的数据进行处理再显示  
  42.         }  
  43.     ]  
  44. })  
  45.   
  46. //value代表该列的值，row代表当前对象  
  47. function formatSex(value,row,index){  
  48.     return value == 1 ? "男" : "女";  
  49.     //或者 return row.sex == 1 ? "男" : "女";  
  50. }  
  51.   
  52.  //查询按钮事件  
  53. $('#search_btn').click(function(){  
  54.     $('#mytab').bootstrapTable('refresh', {url: ROOT+'user/getUserListPage'});  
  55. })  


四：实现前端分页

（一）设置js中参数

[html] view plain copy
  1. sidePagination:'client',  
  2. queryParams : function (params) {  
  3.         var temp = {  
  4.             name:$('#search_name').val(),  
  5.             tel:$('#search_tel').val()  
  6.         };  
  7.         return temp;  
  8.     },  
（二）定义user对象
[html] view plain copy
  1. package com.debo.common;  
  2.   
  3. public class User {  
  4.       
  5.     private Integer id;  
  6.     private String loginName;  
  7.     private String name;  
  8.     private String tel;  
  9.     private Integer sex;  
  10.     public Integer getId() {  
  11.         return id;  
  12.     }  
  13.     public void setId(Integer id) {  
  14.         this.id = id;  
  15.     }  
  16.     public String getLoginName() {  
  17.         return loginName;  
  18.     }  
  19.     public void setLoginName(String loginName) {  
  20.         this.loginName = loginName;  
  21.     }  
  22.     public String getName() {  
  23.         return name;  
  24.     }  
  25.     public void setName(String name) {  
  26.         this.name = name;  
  27.     }  
  28.     public String getTel() {  
  29.         return tel;  
  30.     }  
  31.     public void setTel(String tel) {  
  32.         this.tel = tel;  
  33.     }  
  34.     public Integer getSex() {  
  35.         return sex;  
  36.     }  
  37.     public void setSex(Integer sex) {  
  38.         this.sex = sex;  
  39.     }  
  40. }  
（三）服务器端代码
[html] view plain copy
  1. /**  
  2. *直接一次性查出所有的数据,返回给前台  
  3. */  
  4. @RequestMapping("/getUserListPage")  
  5. @ResponseBody  
  6. public List<User> getUserListPage(User user,HttpServletRequest request){  
  7.     List<User> list = userService.getUserListPage(user);  
  8.     return list;  
  9. }  
（四）mabatis语句
[html] view plain copy
  1. <select id="getUserListPage" resultType="com.debo.common.User">  
  2.     SELECT * FROM user WHERE 1 = 1  
  3.     <if test="name!=null and name !=''">  
  4.         AND name LIKE CONCAT('%',#{name},'%')  
  5.     </if>  
  6.     <if test="tel!=null and tel !=''">  
  7.         AND tel = #{tel}  
  8.     </if>  
  9. </select>  

五：实现服务器端分页

（一）设置js中参数

[html] view plain copy
  1. sidePagination:'server',  
  2. queryParams : function (params) {  
  3.     var temp = {  
  4.         limit : params.limit, // 每页显示数量  
  5.         offset : params.offset, // SQL语句起始索引  
  6.         page: (params.offset / params.limit) + 1,   //当前页码  
  7.               
  8.         Name:$('#search_name').val(),  
  9.         Tel:$('#search_tel').val()  
  10.     };  
  11.     return temp;  
  12. },  
（二）封装公共的page对象，并让user对象继承page对象
[html] view plain copy
  1. package com.debo.common;  
  2.   
  3. public class Page {  
  4.     //每页显示数量  
  5.     private int limit;  
  6.     //页码  
  7.     private int page;  
  8.     //sql语句起始索引  
  9.     private int offset;  
  10.     public int getLimit() {  
  11.         return limit;  
  12.     }  
  13.     public void setLimit(int limit) {  
  14.         this.limit = limit;  
  15.     }  
  16.     public int getPage() {  
  17.         return page;  
  18.     }  
  19.     public void setPage(int page) {  
  20.         this.page = page;  
  21.     }  
  22.     public int getOffset() {  
  23.         return offset;  
  24.     }  
  25.     public void setOffset(int offset) {  
  26.         this.offset = offset;  
  27.     }  
  28.   
  29. }  

[html] view plain copy
  1. package com.debo.common;  
  2.   
  3. public class User extends Page{  
  4.       
  5.     private Integer id;  
  6.     private String loginName;  
  7.     private String name;  
  8.     private String tel;  
  9.     private Integer sex;  
  10.     public Integer getId() {  
  11.         return id;  
  12.     }  
  13.     public void setId(Integer id) {  
  14.         this.id = id;  
  15.     }  
  16.     public String getLoginName() {  
  17.         return loginName;  
  18.     }  
  19.     public void setLoginName(String loginName) {  
  20.         this.loginName = loginName;  
  21.     }  
  22.     public String getName() {  
  23.         return name;  
  24.     }  
  25.     public void setName(String name) {  
  26.         this.name = name;  
  27.     }  
  28.     public String getTel() {  
  29.         return tel;  
  30.     }  
  31.     public void setTel(String tel) {  
  32.         this.tel = tel;  
  33.     }  
  34.     public Integer getSex() {  
  35.         return sex;  
  36.     }  
  37.     public void setSex(Integer sex) {  
  38.         this.sex = sex;  
  39.     }  
  40. }  
（三）封装返回数据实体类
[html] view plain copy
  1. package com.debo.common;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6. public class PageHelper<T> {  
  7.     //实体类集合  
  8.     private List<T> rows = new ArrayList<T>();  
  9.     //数据总条数  
  10.     private int total;  
  11.   
  12.     public PageHelper() {  
  13.         super();  
  14.     }  
  15.   
  16.     public List<T> getRows() {  
  17.         return rows;  
  18.     }  
  19.   
  20.     public void setRows(List<T> rows) {  
  21.         this.rows = rows;  
  22.     }  
  23.   
  24.     public int getTotal() {  
  25.         return total;  
  26.     }  
  27.   
  28.     public void setTotal(int total) {  
  29.         this.total = total;  
  30.     }  
  31.   
  32. }  
（四）服务器代码
[html] view plain copy
  1. @RequestMapping("/getUserListPage")  
  2. @ResponseBody  
  3. public PageHelper<User> getUserListPage(User user,HttpServletRequest request) {  
  4.           
  5.         PageHelper<User> pageHelper = new PageHelper<User>();  
  6.     // 统计总记录数  
  7.     Integer total = userService.getTotal(user);  
  8.     pageHelper.setTotal(total);  
  9.   
  10.     // 查询当前页实体对象  
  11.     List<User> list = userService.getUserListPage(user);  
  12.     pageHelper.setRows(list);  
  13.   
  14.     return pageHelper;  
  15. }  
（五）mybatis语句
[html] view plain copy
  1. <select id="getTotal" resultType="int">  
  2.     SELECT count(1) FROM user WHERE 1 = 1  
  3.     <if test="name!=null and name !=''">  
  4.         AND name LIKE CONCAT('%',#{name},'%')  
  5.     </if>  
  6.     <if test="tel!=null and tel !=''">  
  7.         AND tel = #{tel}  
  8.     </if>  
  9. </select>  
  10.   
  11. <select id="getUserListPage" resultType="com.debo.common.User">  
  12.     SELECT * FROM user WHERE 1 = 1  
  13.     <if test="name!=null and name !=''">  
  14.         AND name LIKE CONCAT('%',#{name},'%')  
  15.     </if>  
  16.     <if test="tel!=null and tel !=''">  
  17.         AND tel = #{tel}  
  18.     </if>  
  19.     LIMIT #{offect},#{limit}  
  20. </select>  



前端页面代码参考文章：点击打开链接


文末福利：

福利一：前端，Java，产品经理，微信小程序，Python等8G资源合集大放送：https://www.jianshu.com/p/e8197d4d9880

福利二：微信小程序入门与实战全套详细视频教程

领取方式：
如果需要学习视频，欢迎关注 【编程微刊】微信公众号，回复【领取资源】一键领取以下所有干货资源，获取更多有用技术干货、文档资料。所有文档会持续更新，欢迎关注一起成长！





posted @ 2018-03-21 13:53  前端视听  阅读(2818)  评论(0)  编辑  收藏  举报