js分页控件（适合ajax）

最新推荐文章于 2024-05-10 22:28:18 发布

hellohorizon

最新推荐文章于 2024-05-10 22:28:18 发布

阅读量1.6k

点赞数

分类专栏： WEB前端文章标签： js分页 javascript分页 ajax分页分页

本文链接：https://blog.csdn.net/yanhang0610/article/details/13347051

版权

WEB前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

修改自网络上的一个分页控件，供参考：

pager.js

var PAGER = {
	currentPage: 1,  //当前页
	totalPages: 0,  //总页数
	pageNums: 10,  //显示的页码数
	pageNumArr: new Array(),  //页码数组
	pager: null,  //显示分页的html对象
	callbackFun: null,  //回调函数, 入参: 当前页码

	/**
	 * 初始化分页参数
	 * currentPage: 当前页码
	 * total: 总页数
	 * pageSize: 每页显示条目数
	 * obj: 显示分页的html对象id
	 * callbackFun: 分页回调函数
	 */
	initPager: function(currentPage, total, pageSize, pageNums, obj, callbackFun) {
		if(total%pageSize==0) {
			this.totalPages = total/pageSize;
		} else {
			this.totalPages = total/pageSize + 1;
		}
		
		this.totalPages = parseInt(this.totalPages);
		this.currentPage = currentPage;
		this.pageNums = pageNums;
		this.pager = document.getElementById(obj);
		this.callbackFun = callbackFun;
	
		this.renderPager();
	},
	
	/**
	 * 执行回调函数
	 */
	doCallBack: function() {
		if(this.callbackFun) {
			this.callbackFun(this.currentPage);
		}
	},

	/**
	 * 跳转到首页
	 */
	gotoFirstPage: function() {
		this.currentPage = 1;
		this.renderPager();
	},

	/**
	 * 跳转到尾页
	 */
	gotoLastPage: function() {
		this.currentPage = this.totalPages;
		this.renderPager();
	},

	/**
	 * 跳转到上一页
	 */
	gotoPrePage: function() {
		if (this.currentPage>1) {
			this.currentPage --;
			this.renderPager();
		}
	},

	/**
	 * 跳转到下一页
	 */
	gotoNextPage: function() {
		//if(this.currentPage<this.pageNumArr[this.pageNumArr.length-1]) {
		if(this.currentPage<this.totalPages) {
			this.currentPage++;
			this.renderPager();
		}
	},

	/**
	 * 跳转到指定页
	 */
	gotoPage: function(targetPage) {
		if(targetPage<1) {
			targetPage = 1;
		} else if(targetPage>this.totalPages) {
			targetPage = this.totalPages;
		}
		
		this.currentPage = targetPage;
		this.renderPager();
	},

	/**
	 * 渲染分页数据
	 */
	renderPager: function() {
		//alert(this.currentPage);
		var begin = 1;
		this.pageNumArr = new Array();
	
		var midPage = Math.floor(this.pageNums/2);
		if(this.totalPages>this.pageNums) {
			if (this.currentPage>midPage) {
				begin = this.currentPage - midPage;
			} 
			if (this.totalPages-this.currentPage<midPage) {
				begin = this.totalPages - (this.pageNums-1);
			}
		}
	
		for(var i=begin; i<=this.totalPages&&i<this.pageNums+begin; i++) {
			this.pageNumArr.push(i);
		}
	
		var pageStr = "";
		var preStr = "<ul><li id='prePage' οnclick='PAGER.gotoPrePage()'>上一页</li><li id='firstPage' οnclick='PAGER.gotoFirstPage()'>首页</li>";
		var nextStr = "<li id='lastPage' οnclick='PAGER.gotoLastPage()'>尾页</li><li id='nextPage' οnclick='PAGER.gotoNextPage()'>下一页</li></ul>";
		var cenStr = "";
		for(var i=0; i<this.pageNumArr.length; i++) {
			if (this.currentPage==this.pageNumArr[i]) {
				cenStr += "<li class='curLi' οnclick='PAGER.gotoPage(" + this.pageNumArr[i] + ")'>" + this.pageNumArr[i] + "</li>";
			} else {
				cenStr += "<li οnclick='PAGER.gotoPage(" + this.pageNumArr[i] + ")'>" + this.pageNumArr[i] + "</li>";
			}
		}
		pageStr = preStr + cenStr + nextStr;
		this.pager.innerHTML = pageStr;
		
		this.doCallBack();
	}

}

用法示例：

<html>
<head>
<title></title>
<link href="pager.css" rel="stylesheet" type="text/css" />
<script src="pager.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">

function getData(tp) {
	//alert(tp);
}


</script>
</head>
<body οnlοad="PAGER.initPager(1, 222, 5, 7, 'pager', getData)">
<form>
<div id="pager"></div>
</form>
</body>
</html>

hellohorizon

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js分页控件（适合ajax）

修改自网络上的一个分页控件，供参考： pager.jsvar PAGER = { currentPage: 1, //当前页 totalPages: 0, //总页数 pageNums: 10, //显示的页码数 pageNumArr: new Array(), //页码数组 pager: null, //显示分页的html对象 callbackFun: null
复制链接

扫一扫

专栏目录