bootstrap table分頁的兩種方式：

前端分頁：一次性從數據庫查詢所有的數據，在前端進行分頁(數據量小的時候或者邏輯處理不復雜的話可以使用前端分頁)

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

bootstrap 下載地址：bootstrap下載

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

jquery下載地址：jquery下載

分頁效果(請忽略樣式)

一：準備js、css等文件

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

?頁面引入需要的js、css

rel="stylesheet">

二：html頁面標簽內容

查詢條件

姓名：

手機號：

查詢

三：JS分頁代碼

$('#mytab').bootstrapTable({

method : 'get',

url : "user/getUserListPage",//請求路徑

striped : true, //是否顯示行間隔色

pageNumber : 1, //初始化加載第一頁

pagination : true,//是否分頁

sidePagination : 'client',//server:服務器端分頁|client：前端分頁

pageSize : 4,//單頁記錄數

pageList : [ 5, 10, 20, 30 ],//可選擇單頁記錄數

showRefresh : true,//刷新按鈕

queryParams : function(params) {//上傳服務器的參數

var temp = {//如果是在服務器端實現分頁，limit、offset這兩個參數是必須的

limit : params.limit, // 每頁顯示數量

offset : params.offset, // SQL語句起始索引

//page : (params.offset / params.limit) + 1, //當前頁碼

Name : $('#search_name').val(),

Tel : $('#search_tel').val()

};

return temp;

},

columns : [ {

title : '登錄名',

field : 'loginName',

sortable : true

}, {

title : '姓名',

field : 'name',

sortable : true

}, {

title : '手機號',

field : 'tel',

}, {

title : '性別',

field : 'sex',

formatter : formatSex,//對返回的數據進行處理再顯示

}, {

title : '操作',

field : 'id',

formatter : operation,//對資源進行操作

} ]

})

//value代表該列的值，row代表當前對象

function formatSex(value, row, index) {

return value == 1 ? "男" : "女";

//或者 return row.sex == 1 ? "男" : "女";

}

//刪除、編輯操作

function operation(value, row, index) {

var htm = "刪除修改"

return htm;

}

//查詢按鈕事件

$('#search_btn').click(function() {

$('#mytab').bootstrapTable('refresh', {

url : 'user/getUserListPage'

});

})

四：bootstrap-table?實現前端分頁

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

sidePagination:'client',

queryParams : function (params) {

var temp = {

name:$('#search_name').val(),

tel:$('#search_tel').val()

};

return temp;

},

??定義user對象

package com.debo.common;

public class User {

private Integer id;

private String loginName;

private String name;

private String tel;

private Integer sex;

public Integer getId() {

return id;

}

public void setId(Integer id) {

this.id = id;

}

public String getLoginName() {

return loginName;

}

public void setLoginName(String loginName) {

this.loginName = loginName;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public String getTel() {

return tel;

}

public void setTel(String tel) {

this.tel = tel;

}

public Integer getSex() {

return sex;

}

public void setSex(Integer sex) {

this.sex = sex;

}

}

??服務器Controller層代碼

/**

*直接一次性查出所有的數據,返回給前端，bootstrap-table自行分頁

*/

@RequestMapping("/getUserListPage")

@ResponseBody

public List getUserListPage(User user,HttpServletRequest request){

List list = userService.getUserListPage(user);

return list;

}

??mabatis語句

SELECT * FROM user WHERE 1 = 1

AND name LIKE CONCAT('%',#{name},'%')

AND tel = #{tel}

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

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

sidePagination:'server',

queryParams : function (params) {

var temp = {

limit : params.limit, // 每頁顯示數量

offset : params.offset, // SQL語句起始索引

page: (params.offset / params.limit) + 1, //當前頁碼

Name:$('#search_name').val(),

Tel:$('#search_tel').val()

};

return temp;

},

??封裝公共的page對象，并讓user對象繼承page對象

package com.debo.common;

public class Page {

//每頁顯示數量

private int limit;

//頁碼

private int page;

//sql語句起始索引

private int offset;

public int getLimit() {

return limit;

}

public void setLimit(int limit) {

this.limit = limit;

}

public int getPage() {

return page;

}

public void setPage(int page) {

this.page = page;

}

public int getOffset() {

return offset;

}

public void setOffset(int offset) {

this.offset = offset;

}

}

package com.debo.common;

public class User extends Page{

private Integer id;

private String loginName;

private String name;

private String tel;

private Integer sex;

public Integer getId() {

return id;

}

public void setId(Integer id) {

this.id = id;

}

public String getLoginName() {

return loginName;

}

public void setLoginName(String loginName) {

this.loginName = loginName;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public String getTel() {

return tel;

}

public void setTel(String tel) {

this.tel = tel;

}

public Integer getSex() {

return sex;

}

public void setSex(Integer sex) {

this.sex = sex;

}

}

??封裝返回數據實體類

package com.debo.common;

import java.util.ArrayList;

import java.util.List;

public class PageHelper {

//實體類集合

private List rows = new ArrayList();

//數據總條數

private int total;

public PageHelper() {

super();

}

public List getRows() {

return rows;

}

public void setRows(List rows) {

this.rows = rows;

}

public int getTotal() {

return total;

}

public void setTotal(int total) {

this.total = total;

}

}

??服務器Controller層代碼

@RequestMapping("/getUserListPage")

@ResponseBody

public PageHelper getUserListPage(User user,HttpServletRequest request) {

PageHelper pageHelper = new PageHelper();

// 統計總記錄數

Integer total = userService.getTotal(user);

pageHelper.setTotal(total);

// 查詢當前頁實體對象

List list = userService.getUserListPage(user);

pageHelper.setRows(list);

return pageHelper;

}

??mybatis語句

SELECT count(1) FROM user WHERE 1 = 1

AND name LIKE CONCAT('%',#{name},'%')

AND tel = #{tel}

SELECT * FROM user WHERE 1 = 1

AND name LIKE CONCAT('%',#{name},'%')

AND tel = #{tel}

LIMIT #{offset},#{limit}

tip：增、刪、改操作后重新加載表格

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

總結

以上是生活随笔為你收集整理的bootstraptable控制分页_bootstrap table分页（前后端两种方式实现）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。