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