How to use PageHelper pagination plug-in the actual project

PageHelper is a pagination plug-in, can help developers quickly and easily complete common paging feature, you simply need to use two lines of code to complete a paging effect ...

Branch recently did a project using Maven + SSM environment, there are paging function, then use the tools to complete PageHelper paging paging capabilities, experience is very good.

1. Database preparation

t_diy the user to write their own articles personality of a table, t_categories is the article's classification, t_user user table; pagination is to find diy information corresponding category according to the classification ID and displayed.

2. PageHelper introduced

1. Introducing a dependency in pom.xml

1 2 3 4 5

<dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>5.1.10</version> </dependency>

(The official recommended to use the latest version, it is currently the latest 5.1.10)
Although the official explanation for the introduction of pagehelper.jar and jsqlparser.jar, but in fact will automatically introduce jsqlparser.jar introduction pagehelper.jar

2. Configure Mybatis plug-in
can choose to configure the spring configuration file, you can also configure the plug-in mybatis global configuration file. I was in mybatis global configuration file.

1 2 3

<plugins> <plugin interceptor="com.github.pagehelper.PageInterceptor"></plugin> </plugins>

Here we note that (I stepped pit):

Note plugins writing position

Started PageHelper

Very easy to use, call PageHelper.startPage (pageNum, pageSize); The first parameter is the first few pages, the second parameter is the page size, closely followed by a first query is to query the page .

In order to facilitate page display and processing results can be used to query results PageInfo Package: PageInfo pageInfo = new PageInfo (data , navigatePages); The first parameter is out of the query data set, it may generally be a List, a second argument is the need to continuously display how many pages the page (can be omitted).

The following is my code:

1 2 3 4 5 6 7 8 9 10

@RequestMapping (value = "/ showCategory") public String getCategories (@RequestParam ( "CID") CID Integer, @ RequestParam (value = "pageNum", defaultValue = ". 1") Integer PN, a ModelMap Map) { PageHelper.startPage ( pn, 14); // 14 per page information List <diy> diys = diyService.getCategories ( cId); // get the id cid all classified information diy PageInfo pageInfo = new PageInfo (diys, 5); // packaged as PageInfo map.addAttribute ( "PageInfo", PageInfo); // pass PageInfo pages, may be used directly acquired EL expression map.addAttribute ( "cols", XBookUtil.getDiyCategoriesCols ( pageInfo.getSize ())); // this is the way I sort of data are compared to the design (do not care) map.addAttribute ( "curCategory", new new Integer (cid)); return "HTML / bookDIY / in CategoryView"; // category page view: categoryView .jsp }

As a SQL statement, do not need to do anything related to paging, my statement is a simple SQL query:

This completes the course, the easiest and most common paging function, is not very simple.

Use Bootstrap beautification page column

Paged data has been, of course, need to optimize your pages, Bootstrap is an easy-to-use front-end library, providing a large column  on how to use PageHelper pagination plug-in the actual project a lot of style, address: HTTPS: //v4.bootcss. com

Bootstrap offers a page bar style, the specific use is not said, and can refer to the official website. The desired effect should look like this:

Actually it contains a lot of small logic:

• Home page is not the first point, does not display the previous page
• Finally, when the last page is not a point, after a no show
• The current page highlighted
• The user clicks to update the displayed page

That's why you want the result to the benefits package PageInfo, the use of these PageInfo can easily control logic:

1. PageInfo has a property navigatepageNums is stored in the current page number should be displayed, and before this second argument PageInfo construction related. (Loop display page)
2. PageInfo has attribute list, storing pages of data (data acquisition)
3. PageInfo has attribute pageNum, indicates the current page number (determined whether highlighted)
4. PageInfo have attributes isFirstPage, isLastPage, indicating whether the first and last page (the first and last page control button to display the front and back pages and hidden)

My code is as follows:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<c:if test="${pageInfo.list.size()>0}"> <div class="container mb-5"> <ul class="pagination justify-content-center"> <c:if test="${pageInfo.isFirstPage}"> <li class="page-item disabled"><a class="page-link" href="#">首页</a></li> </c:if> <c:if test="${pageInfo.isFirstPage != true}"> <li class="page-item"><a class="page-link" href="${pageContext.request.contextPath}/html/bookDIY/showCategory?cId=${curCategory}">首页</a></li> <li class="page-item"><a class="page-link" href="${pageContext.request.contextPath}/html/bookDIY/showCategory?cId=${curCategory}&pageNum=${pageInfo.pageNum-1}"><<</a></li> </c:if> <c:forEach items="${pageInfo.navigatepageNums}" var="pn"> <c:if test="${pageInfo.pageNum == pn}"> <li class="page-item active"><a class="page-link" href="#">${pn}</a></li> </c:if> <c:if test="${pageInfo.pageNum != pn}"> <li class="page-item"><a class="page-link" href="${pageContext.request.contextPath}/html/bookDIY/showCategory?cId=${curCategory}&pageNum=${pn}">${pn}</a></li> </c:if> </c:forEach> <c:if test="${pageInfo.isLastPage}"> <li class="page-item disabled"><a class="page-link" href="#">末页</a></li> </c:if> <c:if test="${pageInfo.isLastPage != true}"> <li class="page-item"><a class="page-link" href="${pageContext.request.contextPath}/html/bookDIY/showCategory?cId=${curCategory}&pageNum=${pageInfo.pageNum+1}">>></a></li> <li class="page-item"><a class="page-link" href="${pageContext.request.contextPath}/html/bookDIY/showCategory?cId=${curCategory}&pageNum=${pageInfo.pages}">末页</a></li> </c:if> </ul> </div> </c:if>

最后的效果如下所示：
![](如何在实际项目中使用PageHelper分页插件/result.PNG)

（数据有限，只有两页...）