bootstrap table分頁（先後端兩種方式實現）

時間  2019-11-19
標籤 bootstrap table 分頁 後端 兩種 方式 實現 欄目 Bootstarp 简体版
原文   原文鏈接

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

bootstrap table分頁有那種方式：html

前端分頁：一次性從數據庫查詢全部的數據，在前端進行分頁（數據量小的時候或者邏輯處理不復雜的話能夠使用前端分頁）前端

服務器分頁：每次只查詢當前頁面加載所須要的那幾條數據java

一：引入js、css文件jquery

[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. })  


四：實現前端分頁sql

（一）設置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中參數bootstrap

[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

福利二：微信小程序入門與實戰全套詳細視頻教程

領取方式：
若是須要學習視頻，歡迎關注 【編程微刊】微信公衆號，回覆【領取資源】一鍵領取如下全部乾貨資源，獲取更多有用技術乾貨、文檔資料。全部文檔會持續更新，歡迎關注一塊兒成長！


相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程