Js 简单上下分页

最新推荐文章于 2023-02-22 09:53:09 发布

lufengsn

最新推荐文章于 2023-02-22 09:53:09 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript function xhtml html ajax 工具

本文链接：https://blog.youkuaiyun.com/lufengsn/article/details/7008124

这篇博客展示了如何使用JavaScript实现页面的上下分页功能。通过HTML和JS代码，实现了分页效果，支持AJAX动态加载内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

[代码] HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Js简单上下分页</title>

</head>
<body>
<div id="resultContent"></div>
</body>
</html>

[代码]Js代码：

var currentPage = 1; //当前页
var pageSize = 10; //每页中显示的数据数
var totalpage = 0; //总页数
var recordCount = 1000; //假设总数据条数100
var numCount = 4; //每页显示多少个分页数字 

//算出多少页
if (recordCount % pageSize == 0) {
	totalpage = parseInt(recordCount / pageSize);
} else {
	totalpage = parseInt(recordCount / pageSize) + 1;
}

totalpage = 11;//假设共有11页，测试用 ，用到时直接删除
if(totalpage > 1){ //需要显示分页工具栏
	setpage();
}

//页数跳转函数
function gotopage(target) {
	currentPage = target;	//把页面计数定位到第几页
	setpage();
	//reloadpage(target);  //调用显示页面函数显示第几页,这个功能是用在页面内容用ajax载入的情况 
}

//设置页数
function setpage(){

	var outstr = "";

	outstr += '<div id="setpage" style="text-align:center;\
				padding:16px;letter-spacing:2px;">';
	
	if (totalpage <= numCount) //页数小于等于每页显示的分页数字
	{	
		outstr += setPageHtml(1, totalpage);
	}
	
	if (totalpage > numCount) //页数大于每页显示的分页数字
	{
		if(parseInt((currentPage) / numCount) == 0)//前每页显示的分页数字
		{	
			outstr += setPageHtml(1, numCount);
		}
		else //每页显示的分页数字 之后分页显示
        {     			
			//构造选中页始终在中间位置
			
			var moiety = 0;
			var begin = 0;
			var end = 0;
			
			if (numCount % 2 == 0) {	//偶数
				moiety = parseInt(numCount / 2);
				
				begin = parseInt(currentPage - moiety);
				end = parseInt((currentPage + moiety ) > totalpage 
						? totalpage : (currentPage + moiety - 1));
			} else {	//奇数
				moiety = parseInt(numCount / 2);
				begin = parseInt(currentPage - moiety);
				end = parseInt((currentPage + moiety) > totalpage 
						? totalpage : (currentPage + moiety));
			}

			outstr += "<a href='javascript:void(0)' onclick='gotopage(" 
						+ 1 + ")'>首页</a> "
		
			outstr += setPageHtml(begin, end);
				
        }
	}
	
	outstr += '</div>' ;
	
	document.getElementById("resultContent").innerHTML = outstr;
	
}

//构造页数Html
function setPageHtml(begin, end){
	var outstr = "";
	if (1 != currentPage) {
		outstr += "<a href='javascript:void(0)' onclick='gotopage(" 
					+ (currentPage - 1) + ")'>上一页</a>";
	}

	for (var i = begin; i <= end; i++) {
		if (i != currentPage) {
			outstr += '[<a href="javascript:void(0)" onclick="gotopage(' 
						+ i + ')">' + i + '</a>]';
		} else {
			outstr += '<span>[' + i + ']<span>';
		}
	}

	if (totalpage != currentPage) {
		outstr += "<a href='javascript:void(0)' onclick='gotopage(" 
					+ (currentPage + 1) + ")'>下一页</a>";
	}
	
	return outstr;
}