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

bootstrap table分頁的兩種方式：

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

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

 

bootstrap 下載地址：bootstrap下載

bootstrap-table 下載地址：bootstrap-table下載

jquery下載地址：jquery下載

 

分頁效果（請忽略樣式）

 

一：準備js、css等文件

▶ 將下載的文檔直接放入webapp目錄下

▶頁面引入須要的js、css

1.  
   <!-- 引入的css文件 -->
2.  
   <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
3.  
   <link href="bootstrap-table/dist/bootstrap-table.min.css"
4.  
   rel="stylesheet">
5.  
   <!-- 引入的js文件 -->
6.  
   <script src="jquery/jquery.min.js"></script>
7.  
   <script src="bootstrap/js/bootstrap.min.js"></script>
8.  
   <script src="bootstrap-table/dist/bootstrap-table.min.js"></script>
9.  
   <script src="bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>

 

二：html頁面標籤內容

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>

 

三：JS分頁代碼

1.  
   $('#mytab').bootstrapTable({
2.  
   method : 'get',
3.  
   url : "user/getUserListPage",//請求路徑
4.  
   striped : true, //是否顯示行間隔色
5.  
   pageNumber : 1, //初始化加載第一頁
6.  
   pagination : true,//是否分頁
7.  
   sidePagination : 'client',//server:服務器端分頁|client：前端分頁
8.  
   pageSize : 4,//單頁記錄數
9.  
   pageList : [ 5, 10, 20, 30 ],//可選擇單頁記錄數
10.  
    showRefresh : true,//刷新按鈕
11.  
    queryParams : function(params) {//上傳服務器的參數
12.  
    var temp = {//若是是在服務器端實現分頁，limit、offset這兩個參數是必須的
13.  
    limit : params.limit, // 每頁顯示數量
14.  
    offset : params.offset, // SQL語句起始索引
15.  
    //page : (params.offset / params.limit) + 1, //當前頁碼
16.  
     
17.  
    Name : $('#search_name').val(),
18.  
    Tel : $('#search_tel').val()
19.  
    };
20.  
    return temp;
21.  
    },
22.  
    columns : [ {
23.  
    title : '登陸名',
24.  
    field : 'loginName',
25.  
    sortable : true
26.  
    }, {
27.  
    title : '姓名',
28.  
    field : 'name',
29.  
    sortable : true
30.  
    }, {
31.  
    title : '手機號',
32.  
    field : 'tel',
33.  
    }, {
34.  
    title : '性別',
35.  
    field : 'sex',
36.  
    formatter : formatSex,//對返回的數據進行處理再顯示
37.  
    }, {
38.  
    title : '操做',
39.  
    field : 'id',
40.  
    formatter : operation,//對資源進行操做
41.  
    } ]
42.  
    })
43.  
     
44.  
    //value表明該列的值，row表明當前對象
45.  
    function formatSex(value, row, index) {
46.  
    return value == 1 ? "男" : "女";
47.  
    //或者 return row.sex == 1 ? "男" : "女";
48.  
    }
49.  
     
50.  
    //刪除、編輯操做
51.  
    function operation(value, row, index) {
52.  
    var htm = " <button>刪除</button><button>修改</button>"
53.  
    return htm;
54.  
    }
55.  
     
56.  
    //查詢按鈕事件
57.  
    $('#search_btn').click(function() {
58.  
    $('#mytab').bootstrapTable('refresh', {
59.  
    url : 'user/getUserListPage'
60.  
    });
61.  
    })

 

四：bootstrap-table 實現前端分頁

▶ 修改JS分頁代碼中某些屬性

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對象

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

▶ 服務器Controller層代碼

1.  
   /**
2.  
   *直接一次性查出全部的數據,返回給前端，bootstrap-table自行分頁
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語句

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>

 

五：bootstrap-table 實現服務器端分頁

▶ 設置JS分頁代碼中的某些屬性

 

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對象

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

 

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

▶ 封裝返回數據實體類

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

▶ 服務器Controller層代碼

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語句

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 #{offset},#{limit}
20.  
    </select>

 

tip：增、刪、改操做後從新加載表格

$("#mytab").bootstrapTable('refresh', {url : url});