Bootstrap-paginator + PageHelper 前后台分页对接

喜欢ヅ旅行 2021-09-15 04:36 318阅读 0赞

**目录**

一、bootstrap-paginator 简介

二、bootstrap-paginator + PageHelper 前后台分页的实现

--------------------

# 一、bootstrap-paginator 简介 #

1.先导入相关的 bootstrap 、jquery、bootstrap-paginator 相关 css+js 文件，本文后面提供百度云下载链接。

2.在 body 标签里面写下以下代码：

<body>
    <div style="text-align: right;">
        <ul id='bp-3-element-test'></ul>
    </div>
    <script type="text/javascript">
    
        $(function(){
            var element = $('#bp-3-element-test');
            var options = {
                bootstrapMajorVersion:3, //bootstrap的版本要求
                currentPage: 2,          //设置当前页
                numberOfPages: 5,		 //设置可以点击到的页数范围
                totalPages:11            //设置总页数
    //          numberOfPages:5        //一页列出多少数据
            }
            element.bootstrapPaginator(options);
        });
    </script>
    </body>

3.这样就行了，项目使用，请自行修改一些动态参数。以下是效果图：

![70][]

4.下面是提供整个 bootstrap 的分页插件代码的百度云链接，下载后可直接预览，已经整理过，可读性强。

链接: [https://pan.baidu.com/s/114GSiHCX2xtrLRUk1yL6qw][https_pan.baidu.com_s_114GSiHCX2xtrLRUk1yL6qw] 密码: a2k9

# 二、bootstrap-paginator 前后台分页的实现 #

1、导入相关的静态资源

2、存放分页框的 html 代码

3、JS 代码

前台后的交互，这里采用的 ajax ，如果不清楚什么是 ajax 的话，可以去学下。通过 ajax 拿到后台的数据之后，需要自己渲染到 html 代码中，具体怎么渲染根据自己的需求去渲染。

4、后台代码

后台采用的是 PageHelper 分页插件，不知道怎么用的，可以看另外一篇博客的介绍。

[Java 分页插件 PageHelper 的配置及使用][Java _ PageHelper]

@RequestMapping(value="/getlist")
    public Map<String,Object> getListInfo(int page)throws IOException{
    	//PageHelper 后台分页插件
    	PageHelper.startPage(page, 10);
    	Map<String,Object> modelMap = new HashMap<String,Object>();
    	//从数据库中查询出数据
    	List<TUser> list = userService.displayAllUser();
    	PageInfo pageInfo = new PageInfo(list);
    	int totalPage = pageInfo.getPages();//总页数
    
    	modelMap.put("page", page);
    	modelMap.put("list", list);
    	modelMap.put("totalPage", totalPage);
    	modelMap.put("pageSize",10 );
    	
    	return modelMap;
    }

# 同类型文章推荐： #

[Jquery 分页插件， 带你一步一步接入后台数据][Jquery _]

[70]: /images/20210626/d37879ef113c45c58a7e9f547879b0d7.png
[https_pan.baidu.com_s_114GSiHCX2xtrLRUk1yL6qw]: https://pan.baidu.com/s/114GSiHCX2xtrLRUk1yL6qw
[Java _ PageHelper]: https://blog.csdn.net/weidong_y/article/details/79700367
[Jquery _]: https://blog.csdn.net/weidong_y/article/details/82014423