前端页面分页组件 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;}