bootstrap table分页(前后端两种方式实现)

bootstrap table分页的两种方式:

前端分页:一次性从数据库查询所有的数据,在前端进行分页(数据量小的时候或者逻辑处理不复杂的话可以使用前端分页)

服务器分页:每次只查询当前页面加载所需要的那几条数据

bootstrap 下载地址:bootstrap下载

bootstrap-table 下载地址:bootstrap-table下载

jquery下载地址:jquery下载

分页效果(请忽略样式)

bootstrap table分页(前后端两种方式实现)

一:准备js、css等文件

▶ 将下载的文档直接放入webapp目录下

bootstrap table分页(前后端两种方式实现)

▶页面引入需要的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});
上一篇:关于如何解决bootstrap table 列 切换 刷新 高度不一样


下一篇:bootstrap table 分页序号递增问题 (转)