SoFunction
Updated on 2025-03-04

Pagination navigation example

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/'"" +="" url="" (curpage="" 1)="" "'="">" + 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.