This is pagenav, a paging plugin implemented using native javascript. The page number shows the jquery plugin. If you only need #pageNav, the page number will be displayed. When calling, you can rewrite the go method as needed. (jquery dependencies have been removed). . . .
The plugin code is as follows:
/* *************************** author:Keel ([email protected]) ************************ The page number displays the jquery plug-in. Only if #pageNav is needed, the page number will be displayed. When calling, you can rewrite the go method as needed. (Jquery dependencies have been removed) ********************************* Example (Note: Put an html object with id pageNav on the page): // The custom method triggered when going to the page number, p is the current page number, and pn is the total number of pages pageNav.fn = function(p,pn){ alert(p+","+pn); }; //Initially skip to page 3, a total of 33 pages pageNav.go(3,33); */var pageNav = pageNav || {};pageNav.fn = null;//p is the current page number, pn is the total number of pages pageNav.nav = function(p, pn) { //Only one page, directly display 1 if (pn <= 1) { this.p = 1; this.pn = 1; return this.pHtml2(1); } if (pn < p) { p = pn; }; var re = ""; //The first page if (p <= 1) { p = 1; } else { //Not first page re += this.pHtml(p - 1, pn, "Previous page"); //Always display the first page number re += this.pHtml(1, pn, "1"); } //Calibration page number this.p = p; this.pn = pn; //Start page number var start = 2; var end = (pn < 9) ? pn: 9; //Does the pre-ellipsis be displayed, that is, the start page number greater than 10 if (p >= 7) { re += "..."; start = p - 4; var e = p + 4; end = (pn < e) ? pn: e; } for (var i = start; i < p; i++) { re += this.pHtml(i, pn); }; re += this.pHtml2(p); for (var i = p + 1; i <= end; i++) { re += this.pHtml(i, pn); }; if (end < pn) { re += "..."; //Show the last page number, if not needed, remove the following sentence re += this.pHtml(pn, pn); }; if (p < pn) { re += this.pHtml(p + 1, pn, "next page"); }; return re;};//Show non-current page pageNav.pHtml = function(pageNo, pn, showPageNo) { showPageNo = showPageNo || pageNo; var H = " <a href='javascript:pageNav.go(" + pageNo + "," + pn + ");' class='pageNum'>" + showPageNo + "</a> "; return H;};//Show the current page pageNav.pHtml2 = function(pageNo) { var H = " <span class='cPageNum'>" + pageNo + "</span> "; return H;};//Output page number, you can rewrite this method as needed pageNav.go = function(p, pn) { //$("#pageNav").html(this.nav(p,pn)); //If you use jQuery, you can use this sentence document.getElementById("pageNav").innerHTML = this.nav(p, pn); if (this.fn != null) { this.fn(this.p, this.pn); };};
The effects are as follows:
Demo address: http://demo.VeVB.COM/js/2014/pagenav/ If you need it, please dig the code yourself. It's very simple, I won't provide it and download it directly.