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> @Resource private UserDao ud; //前端分页 @RequestMapping("/index") public String index(){ return "index"; } @RequestMapping("/findALL") @ResponseBody public List<UserInfo> findAll(){ List< UserInfo> list = ud.findAll(); return 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.封装一个ReturnData类，作为返回数据实体类，它有两个参数，一个表示数据集合，一个是数据总条数
/** * 返回数据实体类 * @param <T> */ public class ReturnData <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
@Resource private UserDao ud; //后端分页 @RequestMapping("/people") public String people(){ return "people"; } @RequestMapping("/getAll") @ResponseBody public ReturnData<People> getAll(People people){ ReturnData<People> peopleData = new ReturnData<People>(); //得到总页数 int totle = ud.getTatlo(); peopleData.setTotal(totle); //得到user数据对象 List<People> plist = ud.getAll(people); peopleData.setRows(plist); return 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 // 每页显示数量 }; return 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>
8.效果图
完事收工。。
