使用PageHelper + bootstrap实现分页

  • A+
所属分类:框架整合 编程

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

            ]
        });

这样分页就做完了
使用PageHelper + bootstrap实现分页
-- END --

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: