【js】js实现动态分页功能（拿来就能用）

最新推荐文章于 2024-07-01 11:34:43 发布
最新推荐文章于 2024-07-01 11:34:43 发布
阅读量4.3k 收藏 14
点赞数 9
分类专栏： # js 文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43592907/article/details/107783777
版权

1、动态分页功能（利用ajax获取的动态数据）

首先确保以下：
1）分页的前提是已经用 ajax 动态读取数据 ，显示在id = “trbody"中，如果没有的话就不用往下看了
2）代码中的 id=” " 不要修改，是对应 分页 中的
3）我自定义显示的是 每页显示 3 条数据（可以随便更改显示自己需要的）
4）默认显示的分页数字是 4 个，这个不要修改了，要修改的话需要改很多地方（缺点）

功能如下（样式是我自己的css）：
在这里插入图片描述

HTML 部分( demo.html )

///table 表格 用来显示 ajax 的动态数据
<table id="tableSort">
	<thead><tr><th/></th></tr></thead>
 	<tbody id="trbody" >
 	<!--数据库数据-->
	</tbody>
</table>

///分页显示的位置
<span id="spanPre"><a>Previous</a></span>
<div id="spbody" style="display: flex;">
	  <!--这里是显示的分页的数字页数-->                                      	
</div>
<span  id="spanNext"><a>Next</a></span>

<script src="js/fenye.js"></script>   ///在 demo.html 中引入fenye.js

js 部分( fenye.js )

//分页
//全局变量
        var numCount;       //数据总数量
        var columnsCounts;  //数据列数量
        var pageCount;      //每页显示的数量
        var pageNum;        //总页数
        var currPageNum ;   //当前页数

        //页面标签变量
        var blockTable;
        var preSpan;
        var firstSpan;		//第一页
        var nextSpan;
        var lastSpan;

window.onload=function(){
      
            //页面标签变量
            blockTable = document.getElementById("tableSort");  			//table
            preSpan = document.getElementById("spanPre");				//上一页			
            nextSpan = document.getElementById("spanNext");				//下一页
            spBody = document.getElementById("spbody"); 				//分页的父元素

            numCount = document.getElementById("tableSort").rows.length-1;       //取table的行数作为数据总数量（减去标题行1）
            pageCount = 3;	 //每页显示的数据为3条  这里是我自定义的 3 条，根据自己需要改
            pageNum = parseInt(numCount/pageCount);				//页数
            if(0 != numCount%pageCount){
                pageNum += 1;
            }
	       	var spHTML="";
			for(var i=1;i< pageNum + 1;i++){
			    console.log(i);
			    if(i==1){
			    	spHTML +="<li class='page-item' id='spid"+i+"'><a class='page-link border-primary bg-primary text-white'  href='javascript:firstPage();'>"+i+"</a></li>";
			    }else{
			    	if(i<5){ //4个一组
			    		spHTML +="<li class='page-item' id='spid"+i+"'>"+i+"</li>";
			    	}else{	
			    		spHTML +="<li style='display:none' class='page-item' id='spid"+i+"'>"+i+"</li>";
			    	}	
			  	}   
			}
	        $("#spbody").append(spHTML);
			firstSpan = document.getElementById("spid1");			//第一页
            firstPage();	//第一页
};

function firstPage(){								//默认是直接执行该函数，也就显示该函数的页面
    hide();											//会直接显示所有数据		
    currPageNum = 1;								//当前页数 1
    for(var i = 1; i < pageCount+1; i++){			//4条数据
        blockTable.rows[i].style.display = "";		//不需要知道首行和尾行	
    }
    firstText();									//刚开是的html页面的，这里是当点击first时，替换成不带链接的文本
   	preText();//pre 也不可以点击
  	   	
    for(var z=2;z<=pageNum;z++){	
		midLink(z); 
    }
    if(pageNum>1){
    	nextLink();
    }else{
    	nextText();
    }
    
}
//中间任意页 不可能是第一页和最后一页
function midPage(page){ 
	hide();
	currPageNum = page;	// 当前页
	var firstR = firstRow(currPageNum);				//返回首行是第几条数据
    var lastR = lastRow(firstR);					//返回尾行是第几天数据
    for(var q = firstR; q < lastR; q++){				
        blockTable.rows[q].style.display = "";
    }
    firstLink();
    preLink();
    for(var e=2;e<=pageNum;e++){
    	if(e==page){
    		midText(e);
    	}else{
    		
    		midLink(e);
    	}
    }
    if(page == pageNum){
    	nextText(); 
    }else{
    	nextLink();
    }
	if(pageNum > 4){
	midshowFourcount(currPageNum);}
}

function prePage(){				//只有当你点击pre按钮时，才执行该函数
    hide(); 										//当你直接点击时pre按钮时，会显示出从改页到结束的所有数据
    currPageNum--;									//当前页面--
    var firstR = firstRow(currPageNum);				//返回首行是第几条数据
    var lastR = lastRow(firstR);					//返回尾行是第几天数据
    for(var a = firstR; a < lastR; a++){				
        blockTable.rows[a].style.display = "";
    }

    if(1 == currPageNum){ 
        firstText();
        preText();
        for(var b=2;b<=pageNum;b++){
        	midLink(b);
        }
        nextLink();
    }else{								//中间页
        firstLink();
        preLink();
        for(var d=2;d<=pageNum;d++){
        	if(d==currPageNum){
        		midText(d);
        	}else{
        		midLink(d);
        	}
        }
        nextLink();
        if(pageNum > 4){
        	 preshowFourcount(currPageNum);
        }
       
    }

}
//点击Mid分页显示4个数字
function midshowFourcount(currPNum){ 
	if((currPNum!=1)&&(currPNum%3==1)){	4 7 10
		if(spBody.children[currPNum].style.display =="none"){		//当前4的状态为   1 2 3 4 	按next的来
			for(var i=currPNum-4;i<currPNum-1;i++){
				spBody.children[i].style.display = "none";
			}
			if(currPNum >=pageNum-3){  //判断是不是最后不够4页，出超范围
				for(var j=currPNum-1;j<pageNum;j++){
					spBody.children[j].style.display = "";
				}
			}else{
				for(var j=currPNum-1;j<currPNum+3;j++){
					spBody.children[j].style.display = "";
				}
			}
		}else{														//当前4的状态为   4 5 6 7	按pre的来
			for(var i=currPNum-4;i<currPNum;i++){
				spBody.children[i].style.display = "";
			}
			if(currPNum >=pageNum-3){  //判断是不是最后不够4页，出超范围
				for(var j=currPNum;j<pageNum;j++){
					spBody.children[j].style.display = "none";
				}
			}else{
				for(var j=currPNum;j<currPNum+3;j++){
					spBody.children[j].style.display = "none";
				}
			}
		}
	}
}

//点击pre分页显示的4个数字
function preshowFourcount(currPNum){
	if(currPNum!=1 && currPNum%3==1){   //1 4 7 10  
		
		for(var i=currPNum-4;i<currPNum;i++){
			spBody.children[i].style.display = "";
		}
		
		if(currPNum >=pageNum-3){  //判断是不是最后不够4页，出超范围
			for(var j=currPNum;j<pageNum;j++){
				spBody.children[j].style.display = "none";
			}
		}else{
			for(var j=currPNum;j<currPNum+3;j++){
				spBody.children[j].style.display = "none";
			}
		}
	}
	//这里解决的问题是：当现在高亮的是4时，点击pre会直接到 1 2 3 4
	if(currPNum%3==0 && spBody.children[currPNum+1].style.display!="none"){	//currPNum可能出界限  	[3] 就是4
		for(var i=currPNum-3;i<=currPNum;i++){			//不一样
			spBody.children[i].style.display = "";
		}
		if(currPNum >=pageNum-3){  //判断是不是最后不够4页，出超范围
			for(var j=currPNum+1;j<pageNum;j++){
				spBody.children[j].style.display = "none";
			}
		}else{
			for(var j=currPNum+1;j<currPNum+4;j++){
				spBody.children[j].style.display = "none";
			}
		}
	}
}

//点击next分页显示4个数字
function nextshowFourcount(currPNum){
	if((currPNum!=1)&&(currPNum%3==1)){	
		for(var i=currPNum-4;i<currPNum-1;i++){
			spBody.children[i].style.display = "none";
		}
		
		if(currPNum >=pageNum-3){  //判断是不是最后不够4页，出超范围
			for(var j=currPNum-1;j<pageNum;j++){
				spBody.children[j].style.display = "";
			}
		}else{
			for(var j=currPNum-1;j<currPNum+3;j++){
				spBody.children[j].style.display = "";
//				console.log(j);
			}
		}
	}
	//这里解决的问题是：当现在高亮的是4时，点击next会直接到 4 5 6 7
	if(currPNum%3==2 && spBody.children[currPNum-1].style.display =="none"){	//currPNum可能出界限  	[3] 就是4
		for(var i=currPNum-5;i<currPNum-1;i++){			//不一样
			spBody.children[i].style.display = "none";
		}
		if(currPNum >=pageNum-2){  //判断是不是最后不够4页，出超范围
			for(var j=currPNum-2;j<pageNum;j++){
				spBody.children[j].style.display = "";
				console.log(j);
			}
			console.log(currPNum);
		}else{
			for(var j=currPNum-2;j<currPNum+2;j++){
				spBody.children[j].style.display = "";
//				console.log(j);
			}
		}
	}
}
//点击下一页
function nextPage(){
    hide();
    currPageNum++; 
    var firstR = firstRow(currPageNum);	//下一页的首行
    var lastR = lastRow(firstR);		//下一页的末行
    for(var g = firstR; g < lastR; g ++){
        blockTable.rows[g].style.display = "";
    }
    firstLink();
	preLink(); 
	for(var i=2;i<=pageNum;i++){
	    if(i==currPageNum){ 
	        midText(i);
	    }else{
	        midLink(i);
	    }
	}
	if(pageNum == currPageNum){
	    nextText();
	}else{ 
	    nextLink();
	}
	if(pageNum > 4){
	nextshowFourcount(currPageNum);  }
}


// 计算将要显示的页面的首行和尾行
function firstRow(currPageNum){
    return pageCount*(currPageNum - 1) + 1;
    // 根据每页的数量，判断当前页的首行数据
}

function lastRow(firstRow){
    var lastRow = firstRow + pageCount;
    if(lastRow > numCount + 1){
        lastRow = numCount + 1;
    }
    return lastRow;
}


//隐藏所有行
function hide(){
    for(var j = 1; j < numCount + 1; j ++){
        blockTable.rows[j].style.display = "none";
    }
}

//控制首页等功能的显示与不显示
function firstLink(){firstSpan.innerHTML = "<li ><a href='javascript:firstPage();'>1</a></li>";}
function firstText(){firstSpan.innerHTML = "<li ><a style='background:darkgrey!important; border-color:darkgrey!important;' >1</a></li>";}
	

function preLink(){preSpan.innerHTML = "<span  id='spanPre'><a href='javascript:prePage();'>Previous</a></span>";}
function preText(){preSpan.innerHTML = "<span  id='spanPre'><a>Previous</a></span>";}


function midLink(ipage){
    document.getElementById("spid"+ipage).innerHTML = "<li><a href='javascript:midPage("+ipage+");'>"+ipage+"</a></li>";
}
function midText(tpage){
	document.getElementById("spid"+tpage).innerHTML = "<li><a  style='background:darkgrey!important; border-color:darkgrey!important;'>"+tpage+"</a></li>";
}

function nextLink(){nextSpan.innerHTML = "<span  id='spanNext'><a  href='javascript:nextPage();'>Next</a></span>";}
function nextText(){nextSpan.innerHTML = "<span  id='spanNext'><a >Next</a></span>";}

代码是根据下面这篇博客修改的：
https://www.cnblogs.com/Faquir/p/5764502.html

如有不对请指正

菜鸟M
关注
专栏目录
JS实现前端动态分页码
互联网那些事
11-04 410
思路分析：有3种情况 第一种情况，当前页面curPage < 4 第二种情况，当前页面curPage == 4 第三种情况，当前页面curPage>4 此外，还要考虑，当前页码 curPage < pageTotal（总页码）-2，才显示 … 首先，先是前端的布局样式 <body> /*首先，在body中添加div id="pagination" *...
项目中真实的分页，拿来就能用的示例
03-05
在"项目中真实的分页，拿来就能用的示例"中，你可以找到一个完整的分页解决方案，包括但不限于以下关键知识点： 1. **MyBatis分页插件**：MyBatis自身并不直接支持分页，但可以通过使用第三方分页插件，如...
js动态分页
09-12
以最简单方式方法实现页面的动态分页，css样式可自定义
js实现动态分页
chensuanhua6028的博客
01-20 321
不多说，直接上代码看吧。 <!doctypehtml> <html> <head> <metacharset="utf-8"> <title>html分页显示</title> <scripttype="tex...
用JavaScript实现分页功能
最新发布
qq_52530691的博客
07-01 1842
用JavaScript实现分页功能
JavaScript实现后端动态数据分页显示
qq_32284411的博客
03-29 328
mybatis分页数据，前端如何使用javaScript实现展示和分页查询
JS实现动态页码及分页导航
BXA
01-16 3530
目录前言内容小结 前言 &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;最近的项目需要添加一个分页导航的功能，没有用网上封装好的文件。通过JS自己简单实现了效果。下面和大家分享一下。 内容 下图为首次加载后的效果，默认显示5页， 当点击下一页时将选中页面的页码置于中间 小结 &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
纯JS实现前端动态分页码
weixin_34293141的博客
10-10 233
思路分析：有3种情况 第一种情况，当前页面curPage < 4 第二种情况，当前页面curPage == 4 第三种情况，当前页面curPage>4 此外，还要考虑，当前页码 curPage < pageTotal（总页码）-2，才显示 ... 首先，先是前端的布局样式 <body> /*首先，在body中添加div ...
js html动态分页
03-20
NULL 博文链接：https://cailin.iteye.com/blog/783376
基于LayUI实现前端分页功能的方法
08-29
LayUI是国产前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。内置了一些常用元素和组件的UI框架。LayUI提供了一个名为LayPage的分页组件，用于实现前端分页功能。 LayPage参数介绍 LayPage...
laypage多功能JavaScript分页组件源代码
03-18
laypage是一款多功能的js分页组件，主要应用于前端页面Ajax普通分页以及...laypage不依赖于任何第三方库，直接拿来用即可，它的接口继承了layui系列组件的一贯简洁，极易上手。那么，从现在开始，将分页的任务交给layp
js实现table分页可以动态生成table
05-24
js实现table分页可以动态生成table
JS实现前端动态分页码代码实例
10-15
主要介绍了JS实现前端动态分页码代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
jquery实现数据动态加载分页的完整版
03-27
jquery实现数据动态加载分页的完整版,不错哦，欢迎下载
JS分页效果JS分页效果JS分页效果
07-13
直接将HTML文件和CSS文件放在同一目录点击即可查看效果
JS实现分页导航效果
10-15
主要为大家详细介绍了JS实现动态页码及分页导航，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
文章分页——js ，拿来就用
12-18
用户可以根据自己的需求下载并使用这个JavaScript脚本来实现文章的分页功能。 总结起来，JavaScript实现文章分页的关键在于对文章内容的处理和分页逻辑的设定，通过计算或查找特定标记来确定分页位置。这个脚本提供...
js分页美观经典易懂拿来就可用
11-19
如果你希望快速实现分页功能，可以考虑使用现有的JavaScript分页库，如`bootstrap-paginator.js`、`pagination.js`或`jQuery Pagination Plugin`等。这些库提供了丰富的配置选项和自定义样式，可以轻松实现复杂的...
使用JS实现新闻内页动态分页功能
本文档主要讨论了在新闻内页实现动态分页功能的技术细节，具体是通过JavaScript进行操作。首先，文档中的关键部分解释了一个逻辑判断，用于检查内容（cinfo）中是否包含特定的分页标签"[NextPage]"，如果存在则设置...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值