用javascript實現較為通用的客戶端分頁元件
1、測試頁面
更新分頁系統
2、pageSystem.js
function PageSystem(count, divID, grountCount, callBack) {
this.totolCount = count; //總記錄數
this.initMaxPage = grountCount? grountCount: 5; //顯示頁數，如 1 2 3 4 5
this.pageSize = 10; //每頁記錄數
this.currentMax = 0; //當前顯示的最大頁碼, 如 1 2 3 4 5; 5為最大頁碼
this.currentMin = 0; //當前顯示的最小頁碼, 如 11 12 13 14 15; 11為最小頁碼
this.homePage = 0; //首頁
this.endPage = 0; //未頁
this.currentPage = 0; //當前頁
this.currentActiveSpan; //當前活動a容器
this.pageDivObj = document.getElementById(divID); //分頁系統容器
this.pages = 0; //總頁數，計算得到
//this._url = _url; //提交URL
this.callBack = callBack; //回撥
var that = this; //指標的引用
this.init = function() {
this.pages = parseInt(this.totolCount / this.pageSize); //獲得總共有幾頁
this.pages = this.totolCount % this.pageSize == 0? this.pages: this.pages+1;
this.createHomePage();
this.createPrePage();
var n = 1;
while(n <= this.pages) {
if(n > this.initMaxPage){
break; //到達最大顯示數
}
var _span = document.createElement("SPAN");
_span.style.cssText = "margin-left:10px";
if(n == 1) { //初始化時第一頁為活動頁
_span.innerText = n;
this.currentActiveSpan = _span;
}else{
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = this.reView;
_a.innerText = n;
_span.appendChild(_a);
}
this.pageDivObj.appendChild(_span);
n++;
}
if(this.pages != 0) {
this.currentMax = n - 1; //當前組最大頁碼 1 2 3 4 5值為5
this.currentMin = 1; //當前最小頁碼 1 2 3 4 5 值為1
this.homePage = 1; //首頁
this.endPage = this.pages; //未頁
this.currentPage = 1; //當前頁
}
//alert(this.currentMax);
//alert(this.currentMin);
this.createNextPage();
this.createEndPage();
};
this.query = function() {
var curPage = that.currentPage; //當前頁
var pageSize = that.pageSize;
if(that.callBack) that.callBack(curPage, pageSize);
};
this.reView = function() {
//重新渲染UI
that.reViewActivePage();
that.query();
};
this.reViewActivePage = function() {
//重新渲染當前頁檢視
var actA = event.srcElement; //當前被點選的 a物件
var ap = actA.parentNode; //獲得當前a容器span物件
//還原當前頁檢視
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = this.reView;
_a.innerText = that.currentActiveSpan.innerText;
that.currentActiveSpan.innerText = "";
that.currentActiveSpan.appendChild(_a);
//渲染新的當前頁檢視
that.currentActiveSpan = ap; //切換當前活動頁容器
var curPage = parseInt(actA.innerText);
that.currentActiveSpan.removeChild(actA);
that.currentActiveSpan.innerText = curPage;
this.currentPage = curPage; //更改當前頁碼
if(!that.toNextGroup()) that.toPreGroup();
};
this.toNextGroup = function() {
//重新渲染顯示頁下一組 1 2 3 4 5 --> 5 6 7 8 9
if(that.currentPage == that.currentMax) {//點選的頁碼為當前組最大頁碼，當go 下一組
if(that.currentPage != that.endPage) { //如果點了未頁當然不會再有下一組啦！
that.pageDivObj.innerHTML = ""; //@1
var pageCode = parseInt(that.currentPage) + 1; //顯示頁碼
var n = 2; //當前活動頁不重創
this.createHomePage();
this.createPrePage();
that.currentActiveSpan.innerText = that.currentPage;
that.pageDivObj.appendChild(that.currentActiveSpan); //將當前活動頁回放,請看@1
while(pageCode <= that.pages) {
if(n > that.initMaxPage){
break; //到達最大顯示數
}
var _span = document.createElement("SPAN");
_span.style.cssText = "margin-left:10px";
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = that.reView;
_a.innerText = pageCode;
_span.appendChild(_a);
that.pageDivObj.appendChild(_span);
pageCode++;
n++;
}
that.currentMax = pageCode - 1;
that.currentMin = that.currentPage;
// alert("currentMax: " + that.currentMax);
// alert("currentMin: " + that.currentMin);
this.createNextPage();
that.createEndPage();
return true;
}//end if
}//end if
return false;
};
this.toPreGroup = function() { //
//重新渲染顯示頁上一組 5 6 7 8 9 -->1 2 3 4 5
if(that.currentPage == that.currentMin) { //點了組中最小頁碼
if(that.currentPage != 1) {
that.pageDivObj.innerHTML = ""; //@2
var pageCode = parseInt(that.currentPage) - (that.initMaxPage -1); //顯示頁碼
var n = 2; //當前活動頁不重創
this.createHomePage();
this.createPrePage();
while(true) {
if(n > that.initMaxPage){
break; //到達最大顯示數
}
var _span = document.createElement("SPAN");
_span.style.cssText = "margin-left:10px";
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = that.reView;
_a.innerText = pageCode++;
_span.appendChild(_a);
that.pageDivObj.appendChild(_span);
n++;
}
that.currentMax = that.currentPage;
that.currentMin = pageCode - (that.initMaxPage -1);
//alert("currentMax: " + that.currentMax);
// alert("currentMin" + that.currentMin);
that.currentActiveSpan.innerText = that.currentPage;
that.pageDivObj.appendChild(that.currentActiveSpan); //將當前活動頁回放,請看@2
that.createNextPage();
that.createEndPage();
}//end if
}//end if
};
this.toHomePage = function(){
//去到首頁
if(that.pages == 0) return;
if(that.currentPage != 1) {//切組
that.pageDivObj.innerHTML = "";
that.init();
}//end if
that.currentPage = 1;
that.currentMin = 1;
that.currentMax = that.initMaxPage;
that.query();
};
this.toEndPage = function() {
//去到未頁
if(that.pages == 0 ||that.currentPage == that.pages) return;
if(true) {//切組條件修改，此條件作廢,臨時設為true
that.pageDivObj.innerHTML = "";
that.createHomePage();
that.createPrePage();
var pageCode = 1;
var n = 1;
while(pageCode <= that.pages) {
if(n > that.initMaxPage-1){
n = 1;
}
n++;
pageCode++;
}
pageCode = that.pages - (n-2);
for(var j = 1; j < n; j++) {
var _span = document.createElement("SPAN");
_span.style.cssText = "margin-left:10px";
if(pageCode == that.pages) { //初始化時第一頁為活動頁
_span.innerText = pageCode;
that.currentActiveSpan = _span;
}else{
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = that.reView;
_a.innerText = pageCode;
_span.appendChild(_a);
pageCode++;
}
that.pageDivObj.appendChild(_span);
}
that.createNextPage();
that.createEndPage();
}//end if
that.currentPage = that.pages;
that.currentMin = that.pages - (n-2);
that.currentMax = that.pages;
// alert("currentMin: " + that.currentMin);
//alert("currentMax: " + that.currentMax);
// alert("pages: " + that.pages);
that.query();
};
this.next = function() {
//下一頁
};
this.pre = function() {
//上一頁
};
this.update = function(count) {
//更新分頁系統
this.totolCount = count;
that.pageDivObj.innerHTML = "";
this.init();
};
this.createPrePage = function() {
return;
var _span = document.createElement("SPAN");
_span.style.cssText = "margin-left:16px";
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = this.pre;
_a.innerText = "上一頁";
_span.appendChild(_a);
this.pageDivObj.appendChild(_span);
};
this.createNextPage = function() {
return;
var _span = document.createElement("SPAN");
_span.style.cssText = "margin-left:16px";
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = this.next;
_a.innerText = "下一頁";
_span.appendChild(_a);
this.pageDivObj.appendChild(_span);
};
this.createHomePage = function() {
var homeSpan = document.createElement("SPAN");
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = this.toHomePage;
_a.innerText = "首頁";
homeSpan.appendChild(_a);
this.pageDivObj.appendChild(homeSpan);
};
this.createEndPage = function() {
var _span = document.createElement("SPAN");
_span.style.cssText = "margin-left:16px";
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = this.toEndPage;
_a.innerText = "未頁(" + this.pages +")";
_span.appendChild(_a);
this.pageDivObj.appendChild(_span);
}
}
更新分頁系統
2、pageSystem.js
function PageSystem(count, divID, grountCount, callBack) {
this.totolCount = count; //總記錄數
this.initMaxPage = grountCount? grountCount: 5; //顯示頁數，如 1 2 3 4 5
this.pageSize = 10; //每頁記錄數
this.currentMax = 0; //當前顯示的最大頁碼, 如 1 2 3 4 5; 5為最大頁碼
this.currentMin = 0; //當前顯示的最小頁碼, 如 11 12 13 14 15; 11為最小頁碼
this.homePage = 0; //首頁
this.endPage = 0; //未頁
this.currentPage = 0; //當前頁
this.currentActiveSpan; //當前活動a容器
this.pageDivObj = document.getElementById(divID); //分頁系統容器
this.pages = 0; //總頁數，計算得到
//this._url = _url; //提交URL
this.callBack = callBack; //回撥
var that = this; //指標的引用
this.init = function() {
this.pages = parseInt(this.totolCount / this.pageSize); //獲得總共有幾頁
this.pages = this.totolCount % this.pageSize == 0? this.pages: this.pages+1;
this.createHomePage();
this.createPrePage();
var n = 1;
while(n <= this.pages) {
if(n > this.initMaxPage){
break; //到達最大顯示數
}
var _span = document.createElement("SPAN");
_span.style.cssText = "margin-left:10px";
if(n == 1) { //初始化時第一頁為活動頁
_span.innerText = n;
this.currentActiveSpan = _span;
}else{
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = this.reView;
_a.innerText = n;
_span.appendChild(_a);
}
this.pageDivObj.appendChild(_span);
n++;
}
if(this.pages != 0) {
this.currentMax = n - 1; //當前組最大頁碼 1 2 3 4 5值為5
this.currentMin = 1; //當前最小頁碼 1 2 3 4 5 值為1
this.homePage = 1; //首頁
this.endPage = this.pages; //未頁
this.currentPage = 1; //當前頁
}
//alert(this.currentMax);
//alert(this.currentMin);
this.createNextPage();
this.createEndPage();
};
this.query = function() {
var curPage = that.currentPage; //當前頁
var pageSize = that.pageSize;
if(that.callBack) that.callBack(curPage, pageSize);
};
this.reView = function() {
//重新渲染UI
that.reViewActivePage();
that.query();
};
this.reViewActivePage = function() {
//重新渲染當前頁檢視
var actA = event.srcElement; //當前被點選的 a物件
var ap = actA.parentNode; //獲得當前a容器span物件
//還原當前頁檢視
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = this.reView;
_a.innerText = that.currentActiveSpan.innerText;
that.currentActiveSpan.innerText = "";
that.currentActiveSpan.appendChild(_a);
//渲染新的當前頁檢視
that.currentActiveSpan = ap; //切換當前活動頁容器
var curPage = parseInt(actA.innerText);
that.currentActiveSpan.removeChild(actA);
that.currentActiveSpan.innerText = curPage;
this.currentPage = curPage; //更改當前頁碼
if(!that.toNextGroup()) that.toPreGroup();
};
this.toNextGroup = function() {
//重新渲染顯示頁下一組 1 2 3 4 5 --> 5 6 7 8 9
if(that.currentPage == that.currentMax) {//點選的頁碼為當前組最大頁碼，當go 下一組
if(that.currentPage != that.endPage) { //如果點了未頁當然不會再有下一組啦！
that.pageDivObj.innerHTML = ""; //@1
var pageCode = parseInt(that.currentPage) + 1; //顯示頁碼
var n = 2; //當前活動頁不重創
this.createHomePage();
this.createPrePage();
that.currentActiveSpan.innerText = that.currentPage;
that.pageDivObj.appendChild(that.currentActiveSpan); //將當前活動頁回放,請看@1
while(pageCode <= that.pages) {
if(n > that.initMaxPage){
break; //到達最大顯示數
}
var _span = document.createElement("SPAN");
_span.style.cssText = "margin-left:10px";
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = that.reView;
_a.innerText = pageCode;
_span.appendChild(_a);
that.pageDivObj.appendChild(_span);
pageCode++;
n++;
}
that.currentMax = pageCode - 1;
that.currentMin = that.currentPage;
// alert("currentMax: " + that.currentMax);
// alert("currentMin: " + that.currentMin);
this.createNextPage();
that.createEndPage();
return true;
}//end if
}//end if
return false;
};
this.toPreGroup = function() { //
//重新渲染顯示頁上一組 5 6 7 8 9 -->1 2 3 4 5
if(that.currentPage == that.currentMin) { //點了組中最小頁碼
if(that.currentPage != 1) {
that.pageDivObj.innerHTML = ""; //@2
var pageCode = parseInt(that.currentPage) - (that.initMaxPage -1); //顯示頁碼
var n = 2; //當前活動頁不重創
this.createHomePage();
this.createPrePage();
while(true) {
if(n > that.initMaxPage){
break; //到達最大顯示數
}
var _span = document.createElement("SPAN");
_span.style.cssText = "margin-left:10px";
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = that.reView;
_a.innerText = pageCode++;
_span.appendChild(_a);
that.pageDivObj.appendChild(_span);
n++;
}
that.currentMax = that.currentPage;
that.currentMin = pageCode - (that.initMaxPage -1);
//alert("currentMax: " + that.currentMax);
// alert("currentMin" + that.currentMin);
that.currentActiveSpan.innerText = that.currentPage;
that.pageDivObj.appendChild(that.currentActiveSpan); //將當前活動頁回放,請看@2
that.createNextPage();
that.createEndPage();
}//end if
}//end if
};
this.toHomePage = function(){
//去到首頁
if(that.pages == 0) return;
if(that.currentPage != 1) {//切組
that.pageDivObj.innerHTML = "";
that.init();
}//end if
that.currentPage = 1;
that.currentMin = 1;
that.currentMax = that.initMaxPage;
that.query();
};
this.toEndPage = function() {
//去到未頁
if(that.pages == 0 ||that.currentPage == that.pages) return;
if(true) {//切組條件修改，此條件作廢,臨時設為true
that.pageDivObj.innerHTML = "";
that.createHomePage();
that.createPrePage();
var pageCode = 1;
var n = 1;
while(pageCode <= that.pages) {
if(n > that.initMaxPage-1){
n = 1;
}
n++;
pageCode++;
}
pageCode = that.pages - (n-2);
for(var j = 1; j < n; j++) {
var _span = document.createElement("SPAN");
_span.style.cssText = "margin-left:10px";
if(pageCode == that.pages) { //初始化時第一頁為活動頁
_span.innerText = pageCode;
that.currentActiveSpan = _span;
}else{
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = that.reView;
_a.innerText = pageCode;
_span.appendChild(_a);
pageCode++;
}
that.pageDivObj.appendChild(_span);
}
that.createNextPage();
that.createEndPage();
}//end if
that.currentPage = that.pages;
that.currentMin = that.pages - (n-2);
that.currentMax = that.pages;
// alert("currentMin: " + that.currentMin);
//alert("currentMax: " + that.currentMax);
// alert("pages: " + that.pages);
that.query();
};
this.next = function() {
//下一頁
};
this.pre = function() {
//上一頁
};
this.update = function(count) {
//更新分頁系統
this.totolCount = count;
that.pageDivObj.innerHTML = "";
this.init();
};
this.createPrePage = function() {
return;
var _span = document.createElement("SPAN");
_span.style.cssText = "margin-left:16px";
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = this.pre;
_a.innerText = "上一頁";
_span.appendChild(_a);
this.pageDivObj.appendChild(_span);
};
this.createNextPage = function() {
return;
var _span = document.createElement("SPAN");
_span.style.cssText = "margin-left:16px";
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = this.next;
_a.innerText = "下一頁";
_span.appendChild(_a);
this.pageDivObj.appendChild(_span);
};
this.createHomePage = function() {
var homeSpan = document.createElement("SPAN");
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = this.toHomePage;
_a.innerText = "首頁";
homeSpan.appendChild(_a);
this.pageDivObj.appendChild(homeSpan);
};
this.createEndPage = function() {
var _span = document.createElement("SPAN");
_span.style.cssText = "margin-left:16px";
var _a = document.createElement("A");
_a.href = "#";
_a.onclick = this.toEndPage;
_a.innerText = "未頁(" + this.pages +")";
_span.appendChild(_a);
this.pageDivObj.appendChild(_span);
}
}
來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/12921506/viewspace-261507/，如需轉載，請註明出處，否則將追究法律責任。
相關文章
- 網頁SSH客戶端的實現網頁客戶端
- BS用什麼方式實現智慧客戶端較好？客戶端
- Squirrel： 通用SQL、NoSQL客戶端UISQL客戶端
- redis客戶端實現高可用讀寫分離Redis客戶端
- QQ音樂Android客戶端Web頁面通用效能優化實踐Android客戶端Web優化
- easyui-table表格客戶端分頁例項UI客戶端
- 客戶端骨架屏實現客戶端
- Redis的Pub/Sub客戶端實現Redis客戶端
- 實用的PostgreSQL客戶端：Postico for MacSQL客戶端Mac
- JavaScript 客戶端框架—AureliaJavaScript客戶端框架
- Web 應用客戶端渲染和伺服器端渲染的比較Web客戶端伺服器
- jQuery實現客戶端CheckAll功能jQuery客戶端
- 客戶端JavaScript的5個弊端客戶端JavaScript
- Java HTTP 客戶端的比較 - reflectoringJavaHTTP客戶端
- LOL 客戶端實時計分板工具客戶端
- Go 實現簡易的 Redis 客戶端GoRedis客戶端
- Android-TCP客戶端的實現AndroidTCP客戶端
- 網頁搜尋客戶端網頁客戶端
- Android客戶端專案元件化實踐Android客戶端元件化
- Repeater控制元件的分頁實現控制元件
- JavaScript客戶端測試之旅JavaScript客戶端
- golang實現tcp客戶端服務端程式GolangTCP客戶端服務端
- c#實現redis客戶端(一)C#Redis客戶端
- 為oracle客戶端瘦身：Oracle客戶端
- Java實現後端分頁Java後端
- 實現客戶端與服務端的HTTP通訊客戶端服務端HTTP
- Istio 中實現客戶端源 IP 的保持客戶端
- pycurl實現hadoop的客戶端功能薦Hadoop客戶端
- 在客戶端用JAVASCRIPT或VBSCRIPT生成WORD文件 (轉)客戶端JavaScript
- 客戶端內嵌Vue頁面客戶端Vue
- 將經典頁面轉換成現代客戶端頁面客戶端
- 原生Javascript實現星星評分元件JavaScript元件
- Android實現Thrift服務端與客戶端Android服務端客戶端
- Vue + Element UI + Lumen 實現通用表格功能 - 分頁VueUI
- Redis 6.0 客戶端快取的伺服器端實現Redis客戶端快取伺服器
- Mqtt websocket javascript 客戶端例項MQQTWebJavaScript客戶端
- IM撤回訊息-iOS客戶端實現iOS客戶端
- FTP客戶端c程式碼功能實現FTP客戶端C程式