First look at the rendering.
The logic of paging is very simple. Baidu's paging logic used in the background only needs to transfer the current page number and the number of items to be displayed on each page to the background. In fact, it only needs a current page number.
Let's look at the background first. The key to paging is the algorithm behind the scenes. Baidu Paging Logic is used here:
//Paging tool class public class PageUtil implements Serializable{ private int rowCount; //How many rows are there in the database? private int startRow; //Initial rows of database queries private int num; //Current page navigation number private int pageSize=10; //How many rows are queried in a page, if not displayed, is the default private int navCount; // How many navigations are there? private int prev; //Previous page private int next; // next page private int first=1; //home page private int last; //Tail page private int begin ; //Display the beginning of navigation private int end; //Show the end of navigation public PageUtil() { super(); } /** * Construction method * @param rowCount How many rows are there in the database? * @param num Current page navigation number * @param pageSize How many rows to query on a page */ public PageUtil(int rowCount, int num, int pageSize) { super(); //Number of rows queried this.rowCount = rowCount; //Number of pages displayed this.pageSize = pageSize; //10 items are displayed by default, and will change if external incoming //Number of navigation pages (total number of pages) = (rounding up) (total number of rows in database / number of pages displayed) this.navCount=(int) Math.ceil(this.rowCount*1.0/this.pageSize); this.last=this.navCount; //Tail page //Less than the minimum is shown on page 1 this.num = Math.max(this.first, num); //Current page //The maximum value is displayed on the last page. this.num=Math.min(this.last, num); //Current page //The starting line of the current page = current page - 1) * 10 and greater than or equal to 0 this.startRow=Math.max(0,(this.num-1)*this.pageSize); this.prev=Math.max(this.first, (this.num-1)); //Previous page this.next=Math.min(this.last, this.num+1); //next page //Display navigation starts less than 10 pages from the first page and only 10 pages from the first page. this.begin=(this.num-this.first)<=10?this.first:(this.num-10); //The end of display navigation is less than 9 pages to the last page and more than 9 pages to display 9 pages. this.end=(this.last-this.num)<9?this.last:(this.num+9); } @Override public String toString() { return "PageUtil{" + "rowCount=" + rowCount + ", startRow=" + startRow + ", num=" + num + ", pageSize=" + pageSize + ", navCount=" + navCount + ", prev=" + prev + ", next=" + next + ", first=" + first + ", last=" + last + ", begin=" + begin + ", end=" + end + '}'; } public int getRowCount() { return rowCount; } public void setRowCount(int rowCount) { this.rowCount = rowCount; } public int getStartRow() { return startRow; } public void setStartRow(int startRow) { this.startRow = startRow; } public int getNum() { return num; } public void setNum(int num) { this.num = num; } public int getPageSize() { return pageSize; } public void setPageSize(int pageSize) { this.pageSize = pageSize; } public int getNavCount() { return navCount; } public void setNavCount(int navCount) { this.navCount = navCount; } public int getPrev() { return prev; } public void setPrev(int prev) { this.prev = prev; } public int getNext() { return next; } public void setNext(int next) { this.next = next; } public int getFirst() { return first; } public void setFirst(int first) { this.first = first; } public int getLast() { return last; } public void setLast(int last) { this.last = last; } public int getBegin() { return begin; } public void setBegin(int begin) { this.begin = begin; } public int getEnd() { return end; } public void setEnd(int end) { this.end = end; } }
The tool class depends on three parameters.
/** * Query all normal book types * @param request * @param page Page parameters from the front desk * @param modelMap * @return */ @RequestMapping(value = "findBookTypeAll.do", method = RequestMethod.GET) public String findBookTypeAll(HttpServletRequest request, String page, ModelMap modelMap){ List<BookTypeModel> bookTypeModelList = null; Gson gson = new Gson(); if (page == null || "".equals(page)){ page = "1"; //If no page is passed in, the first page is used by default. } Integer result = null;//Query the total number of book types try { result = bookTypeService.selectBookTypeByCount(); //Query the total number of book types PageUtil pageUtil = new PageUtil(result,Integer.parseInt(page),10);//How many rows are passed into the rowCount database? How many rows are queried in the navigation number page of the current page? How many other parameters are obtained? Map<String, Integer> pageMap = new HashMap<String, Integer>(); //Pass in parameters for paging pageMap.put("startRow", pageUtil.getStartRow()); pageMap.put("pageSize", pageUtil.getPageSize()); List<BookTypeModel> bookTypeByPage = bookTypeService.findBookTypeByPage(pageMap);//The map contains pages of the first parameter (starting from 1), and how many items are queried by the second parameter //Convert list to json object and pass it to the front desk // String jsonBookType = gson.toJson(bookTypeByPage); // modelMap.put("map", jsonBookType); modelMap.put("pageUtil", pageUtil); modelMap.put("bookTypeByPage", bookTypeByPage); } catch (BaseException e) { e.printStackTrace(); } return "book/findBookTypeAll.ftl"; }
Above basically completed the data query, using sql to obtain the total number of data, and then the current total number of data and display number per page and the current page number to the paging tool class, calculate other parameters, parameters to sql to obtain the query result set, at the same time, the query data and tool class data to the front desk.
js introduced by the front desk:
<script type="text/javascript" src="${request.contextPath}/js/jquery-2.1.4.min.js" ></script> <#Introduce the home-made kkpager paging plug-in - >. <script type="text/javascript" src="${request.contextPath}/kkpager/kkpager.min.js"></script> <#kkpager_orange is actually a css style, and this one is orange - >. <link rel="stylesheet" type="text/cs s" href="${request.contextPath}/kkpager/kkpager_orange.css" />
<script type="text/javascript"> $(function(){ //Generate paging //Some parameters are optional, such as lang, if no default values are passed kkpager.generPageHtml({ pno : ${pageUtil.num}, //// Current page number total : ${pageUtil.navCount}, //PP or P totalRecords : ${pageUtil.rowCount}, //Total number of data bars //Link mode (set a tag link address with different parameters: < a href = "xxxx. html? Current = 3"> 3 </a>; current: current: current page number) //2: click mode (custom function jump, ajax mode, by clicking the event to send ajax requests to obtain data. ajax paging) mode : 'link', //The default value is link, optional link or click getLink : function(n){ //To write in link mode return '${request.contextPath}/bookType/findBookTypeAll.do?page='+n; //Setting the href address n of label a to represent the page number } }); });
Above are the parameters to be used. Pass in these parameters from the background.
Other local data shows are still there, but don't forget to add one thing.
<table border="1" cellpadding="0" cellspacing="0"> <#- Data Display - > Data Display, Data Display, Data Display, Data Display, Data Display, Data Display, Data Display, Data Display, Data Display, Data Display, Data Display, Data Display, Data <tr> <td>Book logo</td> <td>Book Type Name</td> <td>Registration time</td> </tr> <#list bookTypeByPage as list> <tr> <td>${list.bookTypeId}</td> <td>${list.bookTypeName}</td> <td>${(list.createTime)?string("yyyy-MM-dd HH:mm:ss")}</td> </tr> </#list> </table> <hr> <#Display the paging location, if the id changes here, you should go to the kkpager plug-in to modify the js id - >. <div id="kkpager"></div>
Everything is so simple that only one current page number is needed to get paging.
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
$(document).ready(function(){ if ($("#pagination")){ var pagecount = ${pageUtil.rowCount}; //Total var pagesize = ${pageUtil.pageSize}; //pagesize var currentpage = ${pageUtil.num}; //Current page var counts,pagehtml = ""; if (pagecount % pagesize == 0){ counts = parseInt(pagecount / pagesize); //parseInt parses a string and returns an integer } else { counts = parseInt(pagecount / pagesize) + 1; } //Only one page if (pagecount <= pagesize){ pagehtml = ""; } //More than one page if (pagecount > pagesize){ if (currentpage > 1){ pagehtml += '<li><a href="${request.contextPath}/bookType/findBookTypeAll.do?page=' + (currentpage-1) + '">Previous page</a></li>'; } for (var i = 0; i < counts; i ++){ if (i >= (currentpage - 3) && i < (currentpage + 3)){ if (i == currentpage - 1){ pagehtml += '<li class="active"><a href="${request.contextPath}/bookType/findBookTypeAll.do?page=' + (i+1) +'">' + (i+1) +'</a></li>'; } else { pagehtml += '<li><a href="${request.contextPath}/bookType/findBookTypeAll.do?page=' + (i+1) + '">' + (i+1) + '</a></li>'; } } } if (currentpage < counts){ pagehtml += '<li><a href="${request.contextPath}/bookType/findBookTypeAll.do?page=' + (currentpage+1) + '">next page</a></li>'; } } $("#pagination").html(pagehtml); } });
The front desk also adds one:
<ul class="pagination" id="pagination"> </ul>
Styles are also introduced.
<script type="text/javascript" src="${request.contextPath}/js/jquery-2.1.4.min.js" ></script> <!-- The latest edition of the ___________ Bootstrap core CSS file --> <link rel="stylesheet" href="${request.contextPath}/bootstrap-3.3.7-dist/css/bootstrap.min.css" /> <!-- Abreast of the times Bootstrap core JavaScript file --> <script type="text/javascript" src="${request.contextPath}/bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script>
The effect may not be as good as the above, but it is still quite good. And the paging logic is clear.
The results are as follows:
