Pagination can set the link text displayed in the front desk of the home page, previous page, next page, and last page of the pagination. This is just a mention of simple functions, and it is more convenient to conduct in-depth research and analysis of its principles.
//ContainerId target container navigation, it is recommended to use the span tag //url defaults to?pagenum= //curPage Current page number //maxSection The maximum number of segments (the largest number of pages in a segment) //totalPage TotalPage function Navigate(containerId,url,curPage,maxSection, totalPage) { //To the first page symbol var first = "|<<"; //To the last page symbol var last = ">>|"; //The previous page symbol var back = "<" //Next page symbol var next = ">"; //Illegal page number processing if (curPage > totalPage || curPage < 0) { curPage = 1; } //Get the parent element of the navigation container var containerObj = (containerId); //Get the segment number where the current page is located (I have been debugging for a long time and it turned out to be a type problem, but it was actually a float type) var curSection = ((curPage - 1) / maxSection + 1); //Get the last segment number var lastSection = ((totalPage - 1) / maxSection + 1); var html = ""; //The current page is not the first page, added to the home page, and the previous page if (curPage > 1) { html += "... "; } //The first page number of the current section var curSectionFirst = (curSection - 1) * maxSection + 1; //The last page number of the current segment var curSecitonLast = curSection * maxSection; //Output the page number of the current segment for (var i = curSectionFirst; i <= curSecitonLast && i <= totalPage; i++) { if (curPage == i) { html += "... "; } //The current page is not the last page, add the next page and last page symbols if (curPage != totalPage) { html += "<a data-cke-saved-href="/jiangpeng59/article/details/" href="/jiangpeng59/article/details/'&quot;" +="" url="" (curpage="" 1)="" "&#39;="">" + next + " "; html += " }
Obtain the following page navigation effect as follows: |<< < ... 9 10 11 12 13 14 15 16 ... > >>|
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.