当前位置：首页 >前端技术 > bootstrap table 前后端分页（超级简单）

bootstrap table 前后端分页（超级简单）

前端技术

前端分页：数据库查询所有的数据，在前端进行分页

后端分页：每次只查询当前页面加载所需要的那几条数据

下载bootstrap

下载bootstrap table

jquery谁都有，不说了

项目结构：TestController命名打错了，请无视。。

一，前端分页

前端分页比较简单，只需要把数据都传到前端，让bootstrap table自己处理显示就行了

1.随便建个userinfo数据库

2.entity,dao,xml，controlle代码如下

public class UserInfo {private Integer id;private String name;private Integer age;private String sex;}public interface UserDao {List<UserInfo> findAll();}  <select id="findAll" resultType="com.jz.bootstrap.entity.UserInfo"> select * from userinfo </select>@Resourceprivate UserDao ud;//前端分页@RequestMapping("/index")public  String index(){retu "index";}@RequestMapping("/findALL")@ResponseBodypublic List<UserInfo> findAll(){List< UserInfo> list = ud.findAll();retu list;}

3，页面我用的是thymeleaf模板，模板不同的照自己模板语法引入js即可，只需要声明个table

<!DOCTYPE html><html lang="en" xmlns:th=http://www.thymeleaf.org><head><meta charset="UTF-8"><title>Title</title><link th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.css}" rel="stylesheet"/><link th:href="@{/bootstrap-table-master/dist/bootstrap-table.css}" rel="stylesheet"/><script th:src="@{/js/jquery-3.3.1.min.js}"></script><script th:src="@{/bootstrap-3.3.7-dist/js/bootstrap.js}"></script><script th:src="@{/bootstrap-table-master/dist/bootstrap-table.js}"></script><script th:src="@{/bootstrap-table-master/dist/locale/bootstrap-table-zh-CN.js}"></script></head><body><h2>前端分页</h2><table id="mytable"></table></body><script>$(document).ready(function () {$("#mytable").bootstrapTable({url:"/findALL",  //请求地址striped : true, //是否显示行间隔色pageNumber : 1, //初始化加载第一页pagination : true,//是否分页sidePagination : 'client',//server:服务器端分页|client：前端分页pageSize : 5,//单页记录数pageList : [ 5, 10],//可选择单页记录数showRefresh : true,//刷新按钮columns : [ {title : 'id',field : 'id',sortable : true}, {title : '姓名',field : 'name',sortable : true}, {title : '年龄',field : 'age',sortable : true},{title : '性别',field : 'sex',sortable : true}]})})</script></html>

4.完成效果图

二，后端分页

1.封装一个Page工具类

public class Page {private int pageNumber; //每页的条数private int offset; //数据库查询索引  //get，set省略}

2.复制一下UserInfo类重命名People,并继承Page

public class People  extends Page {private Integer id;private String name;private Integer age;private String sex;//...}

3.封装一个RetuData类，作为返回数据实体类，它有两个参数，一个表示数据集合，一个是数据总条数

/** * 返回数据实体类 * @param <T> */public class RetuData <T>{//数据集合private List<T> rows = new ArrayList<T>();//数据总条数private int total;  //...}

4.dao接口，加两个方法即可

public interface UserDao {// List<UserInfo> findAll();List<People> getAll(People people);int getTatlo();}

5.xml 文件，一样的，加两个查询语句即可

 <select id="getAll" resultType="com.jz.bootstrap.entity.People"> select * from userinfo  LIMIT  #{offset},#{pageNumber} </select> <select id="getTatlo" resultType="java.lang.Integer"> select count(1) from userinfo </select>

6.controller

 @Resourceprivate UserDao ud; //后端分页@RequestMapping("/people")public  String people(){retu "people";}@RequestMapping("/getAll")@ResponseBodypublic RetuData<People> getAll(People people){RetuData<People> peopleData = new RetuData<People>();//得到总页数int totle = ud.getTatlo();peopleData.setTotal(totle);//得到user数据对象List<People> plist = ud.getAll(people);peopleData.setRows(plist);retu  peopleData;}

7.页面；和前端分页一样的，只是请求地址和分页方式变了一下，另外向后台传了两个分页查询参数

<!DOCTYPE html><html lang="en" xmlns:th=http://www.thymeleaf.org><head><meta charset="UTF-8"><title>Title</title><link th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.css}" rel="stylesheet"/><link th:href="@{/bootstrap-table-master/dist/bootstrap-table.css}" rel="stylesheet"/><script th:src="@{/js/jquery-3.3.1.min.js}"></script><script th:src="@{/bootstrap-3.3.7-dist/js/bootstrap.js}"></script><script th:src="@{/bootstrap-table-master/dist/bootstrap-table.js}"></script><script th:src="@{/bootstrap-table-master/dist/locale/bootstrap-table-zh-CN.js}"></script></head><body><h2>后端分页</h2><table id="mytable"></table></body><script>$(document).ready(function () {$("#mytable").bootstrapTable({ url:"/getAll",//请求地址striped : true, //是否显示行间隔色pageNumber : 1, //初始化加载第一页pagination : true,//是否分页sidePagination : 'server',//server:服务器端分页|client：前端分页pageSize : 5,//单页记录数pageList : [ 5, 10, 20],//可选择单页记录数showRefresh : true,//刷新按钮queryParams : function(params) {//上传服务器的参数var temp = {offset :params.offset + 0,// SQL语句起始索引pageNumber : params.limit  // 每页显示数量};retu temp;},columns : [ {title : 'id',field : 'id',sortable : true}, {title : '姓名',field : 'name',sortable : true}, {title : '年龄',field : 'age',sortable : true},{title : '性别',field : 'sex',sortable : true}]})})</script></html>