前端頁面分頁組件 js

自定義前端分頁組件

開發場景

項目數據查詢頁，因為可能同時存在多個列表查詢，並且數據量較大，需要用到分頁，這時候自己可以寫一個簡單的分頁組件

自定義組件邏輯

可以翻頁

最基本的功能，比如數據有5頁，1，2，3，4，5 點擊哪個就查詢哪一頁的數據，點擊5，就查詢第5頁的數據

有前后翻頁功能

類似<前一頁，>后一頁的翻頁功能

頁面數據較大時，控制頁碼量，設計顯示方式

如果數據有230條，每頁10條數據，那么一共有23頁；
但是頁面需要把 1 - 23 頁碼全部顯示出來嗎，這樣很長，也影響美觀，所以要設計頁面顯示方式

具體實現源碼

js文件

將js引入也頁面即可

/*

分頁對象定義js邏輯
create 2020-04-26
author Narule

*/
//分頁組件對象定義
function PageComponents (id,pageSize,outRequst) {
	this.id = id; //分頁組件id
	this.pageSize = pageSize; // 分頁查詢條數
	this.count = 0;  // 數據總條數
	this.outRequst = outRequst; // 分頁查詢函數
	this.totalPage = 0;  //總頁數
	this.initPageNum = 10; //默認分頁條數
	this.pageBody = '';  //分頁組件實際內容
	this.currentPage = 1; //當前頁
	this.pageId = 'page-' + id;//分頁組件id 用於區分多個分頁列表時使用
	this.idAHead = 'page-'+this.pageId+'-a-'; //頁碼id 用於被點擊的頁碼高亮設置時使用
	this.ifInit = false; //是否初始化
	this.startPage = 1; //顯示起始頁
	this.endPage = this.initPageNum; //顯示尾頁
}

// 分頁組件構造方法和公共函數定義
PageComponents.prototype = {
	constructor : PageComponents,
	//初始化
	init : function (){
		if(this.id != undefined && this.pageSize !=undefined && this.count != undefined && this.ifInit == false){
			this.totalPage = Math.ceil(this.count/this.pageSize); //總頁數
			this.ifInit = true;
			if(this.totalPage < this.initPageNum) {
				this.endPage = this.totalPage;
			}else{
				this.endPage = this.initPageNum;
			}
			this.setPage();
			
		}
	},
	//頁面跳轉
	goPage : function(num){
		if(this.currentPage != num){
			this.changeActiveTag(this.currentPage,num);
			this.outRequst();
		}
	},
	//向前跳轉一頁
	beforePage : function(){
		if(this.currentPage > 1){
			this.goPage(this.currentPage - 1);
		}
	},
	//向后跳轉一頁
	afterPage : function(){
		if(this.currentPage < this.totalPage){
			this.goPage(this.currentPage + 1);
		}
	},
	//設置被點擊頁面高亮
	changeActiveTag : function(oldPageNum,newPageNum){
                //移除原先的 class active
		document.getElementById(this.idAHead + oldPageNum).classList.remove('active');
		this.currentPage = newPageNum;
		if(this.totalPage > this.initPageNum){
			if(oldPageNum > newPageNum){ //頁數減小
				if(newPageNum%this.initPageNum == 0){
					this.startPage = (newPageNum - this.initPageNum + 1);
					this.endPage = newPageNum;
					//需要翻頁
					this.setPage();
				}
			}else if(oldPageNum < newPageNum){ // 頁數增大
				if(newPageNum > this.initPageNum && newPageNum%this.initPageNum == 1){
					this.startPage = newPageNum;
					var pPageNum = (newPageNum + this.initPageNum - 1);
					if(pPageNum > this.totalPage){
						this.endPage = this.totalPage;
					}else{
						this.endPage = pPageNum;
					}
					//需要重置翻頁
					this.setPage();
				}
			}
		}
		
		//$(oid).class.remove('active');
		//$(nid).class.add('active');
		document.getElementById(this.idAHead + newPageNum).classList.add('active');
	},
	setPage : function (){
		this.pageBody = "";
		for (var i = this.startPage; i <= this.endPage ; i++) {
				var aBody = '';
				if(i == this.currentPage){
					aBody = '<a class="active" id="' + this.idAHead + i + '" onclick="goPage(\'' + this.id +'\','+ i +')">'+ i +'</a>'
				}else {
					aBody = '<a id="' + this.idAHead  + i + '" onclick="goPage(\'' + this.id +'\','+ i +')">'+ i +'</a>'
				} 
				this.pageBody = this.pageBody +  '<li>' + aBody + '</li>'
			}
			if(this.pageBody == ""){
				this.pageBody = "<font color='white'>無數據</font>"
			}else if(this.totalPage > 1){
				this.pageBody = "<li><a onclick='beforePage(\""+ this.id +"\")'><</a><li>" + this.pageBody + "<li><a onclick='afterPage(\""+ this.id +"\")'>></a><li>"
			};
			document.getElementById(this.pageId).innerHTML = this.pageBody;
	},
}

/****************************
下面map對象構建及清空等方法
推薦在本地初始化分頁時使用
*/
var pageMap = new Map(); //用於存放分頁對象

/*外部通過id調用對象方法*/

function goPage(id,num){ 
	pageMap.get(id).goPage(num);
}
function beforePage(id){
	pageMap.get(id).beforePage();
}
function afterPage(id){
	pageMap.get(id).afterPage();
}

/* 分頁組件清空body */
function pageMapInit(){
	pageMap.forEach(function(value,key){
　　　		value.ifInit = false;
		value.currentPage = 1;
		value.pageBody = ''
　　　});
}
/*****************************/
//pageMap.set(this.id,this); //存放到map方便后面獲取此對象    調用對象方法

其他

js 中
document.getElementById(this.idAHead + oldPageNum).classList.remove('active'); 表示移除a標簽 active class
document.getElementById(this.idAHead + newPageNum).classList.add('active'); 表示添加a標簽 active class 高亮顯示

css

html頁面中 分頁標簽的樣式設置

/*
分頁
*/
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: white;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    background-color: transparent;
    border: 0px solid #071f4d; /* Gray */
}


ul.pagination li a.active {
    /*background-color: #4CAF50;*/
    /*background-color: #ddd;	*/
    background-color: #071f4d;	
    color: white;
}

ul.pagination li a:hover:not(.active) {background-color: #071f4d;}