使用PageHelper + bootstrap实现分页

bootstrap框架小编个人感觉很强大,就是Demo有点少,能节省我们很多时间。本次我来讲讲分页的使用吧。使用bootstrap分页不仅美观,各种计算和传值都不用我们去管,很方便的。

先引入依赖

  • 这是Spring Boot的依赖
 com.github.pagehelper pagehelper-spring-boot-starter 1.2.10
  • 这是普通maven项目的依赖
 com.github.pagehelper pagehelper 4.2.0

看下我们的分页查询数据的sql语句:(不需要写limit,PageHelper会帮我们封装好,后面讲)

 SELECT * FROM imgdata where userid = #{userid} 

这里我就省略了dao层和service层架构了。直接看controller怎么用吧:

 @RequestMapping(value = "/topage.do") @ResponseBody public String selectByFy(HttpSession session, Integer pageNum, Integer pageSize) { JSONObject jsonObject = new JSONObject(); Integer userid = (Integer) session.getAttribute("userid"); //使用Pagehelper传入当前页数和页面显示条数会自动为我们的select语句加上limit查询 //从他的下一条sql开始分页 PageHelper.startPage(pageNum, pageSize); List images = imgService.selectimg(userid);//这是我们的sql //使用pageInfo包装查询 PageInfo rolePageInfo = new PageInfo(images); jsonObject.put("total", rolePageInfo.getTotal()); jsonObject.put("rows", rolePageInfo.getList()); return jsonObject.toString(); }

接下来我们再看一下页面如何使用bootstrap的分页:

 // 分页 var t = $("#table_server").bootstrapTable({ url: '/admin/topage.do',//请求后台的url method: 'get', dataType: "json", striped: true,//设置为 true 会有隔行变色效果 undefinedText: "空",//当数据为 undefined 时显示的字符 pagination: true, //分页 // paginationLoop:true,//设置为 true 启用分页条无限循环的功能。 showToggle: "true",//是否显示 切换试图(table/card)按钮 showColumns: "true",//是否显示 内容列下拉框 pageNumber: 1,//如果设置了分页,首页页码 // showPaginationSwitch:true,//是否显示 数据条数选择框 pageSize: 5,//如果设置了分页,页面数据条数 pageList: [5, 10, 20, 40], //如果设置了分页,设置可供选择的页面数据条数。设置为All 则显示所有记录。 paginationPreText: '‹',//指定分页条中上一页按钮的图标或文字,这里是< paginationNextText: '›',//指定分页条中下一页按钮的图标或文字,这里是> // singleSelect: false,//设置True 将禁止多选 search: false, //显示搜索框 data_local: "zh-US",//表格汉化 sidePagination: "server", //服务端处理分页 queryParams: function (params) {//自定义参数,这里的参数是传给后台的,我这是是分页用的 return {//这里的params是table提供的 pageNum: (params.offset / params.limit) + 1,//从数据库第几条记录开始 pageSize: params.limit//找多少条 }; }, idField: "链接",//指定主键列 columns: [ { title: '#',//表的列名 formatter: function (value, row, index) { //return index+1; //序号正序排序从1开始 var pageSize = $('#table_server').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条 var pageNumber = $('#table_server').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页 return pageSize * (pageNumber - 1) + index + 1; //返回每条的序号: 每页条数 * (当前页 - 1 )+ 序号 }, align: 'center'//水平居中 }, { title: '链接', field: 'imgurl', align: 'center' }, { title: '日期', field: 'updatetime', align: 'center' }, { //EMAIL title: '大小', field: 'sizes', align: 'center' }, { //部门名字 title: '操作', field: '',//可以直接取到属性里面的属性,赞 align: 'center' } ] });

这样分页就做完了
image.png

-- END --

本文由 Hellohao 作者:hellohao 发表,其版权均为 Hellohao 所有,文章内容系作者个人观点,不代表 Hellohao 对观点赞同或支持。如需转载,请注明文章来源。
0

发表评论