bootstraptable控制分页_bootstrap table分页（前后端两种方式实现）

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});