A brief discussion on two ways to implement bootstrap table paging

This article will introduce to you two ways to implementbootstraptable 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

[Related recommendations : "bootstrap tutorial"】

2: HTML page tag content

 
 查询条件 
 
 姓名： 
  
 手机号： 
  
 
 查询 
 
 
 

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 = "删除修改" return htm; } //查询按钮事件 $('#search_btn').click(function() { $('#mytab').bootstrapTable('refresh', { url : 'user/getUserListPage' }); })

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 getUserListPage(User user,HttpServletRequest request){ List list = userService.getUserListPage(user); return list; }

mabatis statement

 SELECT * FROM user WHERE 1 = 1  AND name LIKE CONCAT('%',#{name},'%')   AND tel = #{tel}  

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 { //实体类集合 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; } }

Server Controller layer code

@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 statement

 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: 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!