A brief discussion on two ways to implement bootstrap table paging

This article will introduce to you two ways to implement bootstrap table paging. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Two ways of bootstrap table paging:

Front-end paging: Query all data from the database at one time and perform it on the front-end Paging (front-end paging can be used when the amount of data is small or the logic processing is not complex)

Server paging: only query the pieces of data required for loading the current page each time

bootstrap download address ：http://www.bootcss.com/

bootstrap-table Download address: http://bootstrap-table.wenzhixin.net.cn/

jquery Download address: http:/ /www.jq22.com/jquery-info122

Paging effect (please ignore the style)

1: Prepare js, css and other files

Put the downloaded document directly into the webapp directory

Introduce the required js and css into the page

<!-- 引入的css文件  -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="bootstrap-table/dist/bootstrap-table.min.css"
    rel="stylesheet">
<!-- 引入的js文件 -->
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>

[Related recommendations : "bootstrap tutorial"】

2: HTML page tag content

<div class="panel panel-default">
    <div class="panel-heading">
        查询条件
    </div>
    <div class="panel-body form-group" style="margin-bottom:0px;">
        <label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">姓名：</label>
        <div class="col-sm-2">
            <input type="text" class="form-control" name="Name" id="search_name"/>
        </div>
        <label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">手机号：</label>
        <div class="col-sm-2">
            <input type="text" class="form-control" name="Name" id="search_tel"/>
        </div>
        <div class="col-sm-1 col-sm-offset-4">
            <button class="btn btn-primary" id="search_btn">查询</button>
        </div>
     </div>
</div>
<table id="mytab" class="table table-hover"></table>

3: JS paging code

$('#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 = "<button>删除</button><button>修改</button>"
    return htm;
}

//查询按钮事件
$(&#39;#search_btn&#39;).click(function() {
    $(&#39;#mytab&#39;).bootstrapTable(&#39;refresh&#39;, {
        url : &#39;user/getUserListPage&#39;
    });
})

Four: bootstrap-table implements front-end paging

Modify some attributes in the JS paging code

sidePagination:'client',
queryParams : function (params) {
        var temp = {
            name:$('#search_name').val(),
            tel:$('#search_tel').val()
        };
        return temp;
    },

Define user object

package com.debo.common;

public class User {

    private Integer id;
    private String loginName;
    private String name;
    private String tel;
    private Integer sex;

        //省略Get/Set函数
}

Server Controller layer code

/**
*直接一次性查出所有的数据,返回给前端，bootstrap-table自行分页
*/
@RequestMapping("/getUserListPage")
@ResponseBody
public List<User> getUserListPage(User user,HttpServletRequest request){
    List<User> list = userService.getUserListPage(user);
    return list;
}

mabatis statement

<select id="getUserListPage" resultType="com.debo.common.User">
    SELECT * FROM user WHERE 1 = 1
    <if test="name!=null and name !=&#39;&#39;">
        AND name LIKE CONCAT(&#39;%&#39;,#{name},&#39;%&#39;)
    </if>
    <if test="tel!=null and tel !=&#39;&#39;">
        AND tel = #{tel}
    </if>
</select>

5: bootstrap-table implements server-side paging

Set certain attributes in the JS paging code

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

Encapsulate the public page object and let the user object inherit the page object

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

Encapsulate the returned data entity class

package com.debo.common;

import java.util.ArrayList;
import java.util.List;

public class PageHelper<T> {
    //实体类集合
    private List<T> rows = new ArrayList<T>();
    //数据总条数
    private int total;

    public PageHelper() {
        super();
    }

    public List<T> getRows() {
        return rows;
    }

    public void setRows(List<T> rows) {
        this.rows = rows;
    }

    public int getTotal() {
        return total;
    }

    public void setTotal(int total) {
        this.total = total;
    }

}

Server Controller layer code

@RequestMapping("/getUserListPage")
@ResponseBody
public PageHelper<User> getUserListPage(User user,HttpServletRequest request) {

        PageHelper<User> pageHelper = new PageHelper<User>();
    // 统计总记录数
    Integer total = userService.getTotal(user);
    pageHelper.setTotal(total);

    // 查询当前页实体对象
    List<User> list = userService.getUserListPage(user);
    pageHelper.setRows(list);

    return pageHelper;
}

mybatis statement

<select id="getTotal" resultType="int">
    SELECT count(1) FROM user WHERE 1 = 1
    <if test="name!=null and name !=&#39;&#39;">
        AND name LIKE CONCAT(&#39;%&#39;,#{name},&#39;%&#39;)
    </if>
    <if test="tel!=null and tel !=&#39;&#39;">
        AND tel = #{tel}
    </if>
</select>

<select id="getUserListPage" resultType="com.debo.common.User">
    SELECT * FROM user WHERE 1 = 1
    <if test="name!=null and name !=&#39;&#39;">
        AND name LIKE CONCAT(&#39;%&#39;,#{name},&#39;%&#39;)
    </if>
    <if test="tel!=null and tel !=&#39;&#39;">
        AND tel = #{tel}
    </if>
    LIMIT #{offset},#{limit}
</select>

tip: Reload the table after adding, deleting, or modifying operations

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

For more programming-related knowledge, please visit:Programming Teaching! !

The above is the detailed content of A brief discussion on two ways to implement bootstrap table paging. For more information, please follow other related articles on the PHP Chinese website!