简单的分页

最新推荐文章于 2022-04-07 17:07:59 发布

mkmin

最新推荐文章于 2022-04-07 17:07:59 发布

阅读量376

点赞数 1

分类专栏： javascript javascript 文章标签：前端 javascript

本文链接：https://blog.csdn.net/HUSHILIN001/article/details/78577266

版权

javascript 同时被 2 个专栏收录

51 篇文章 1 订阅

订阅专栏

javascript

44 篇文章 2 订阅

订阅专栏

最新项目用到的一个分页界面，效果大概是这样的：

所以我们考虑的时候基本是这几点，当点击的页数大于最大页面，当点击的页数小于最小页面等等，以及点击之后的切换，很多时候数据都是改变的，所以我们需要三个最基础的数值，分别是当前页面，总条数，当前页面的条数，而泽泻都是变化的，都需要我们点击的时候重新去构图，判断，所以，我们这三个数值是最基本的，最重要的

其次就是一大堆根据自己想法的事情，比如点击向左，要加多少，还有点击多少的时候回发生什么事情，等等，所以这个只是个模板

基于jquery

为了兼容性，最好还是使用jquery1.x版本的

/*
 * 搜索：业务代码
 * */

var _myjs = new function() {
	var childrenclass = "";
	var curclass = "";
	var allsize = 0;
	var pageSize = 0;
	var pageNo = 0;
	var allpage = 0; //总页数
	page_fast = 10; //增加几页
	page_Return = 10; //返回的几页

};
//	_myjs.fenye.setfenye("div","childrespan","childre_choosespan",3600,180,19);
_myjs.fenye = {
	/*
	 childrenclass：普通样式
	 curclass：被选中的样式
	 allsize：全部的大小
	 pageNo：当前页码
	 pagesize：当前每页多少条数据
	 * */
	//刷新页面
	setfenye: function(divclass, childrenclass, curclass, allsize, pageSize, pageNo) {
		$(divclass).empty();
		this.divclass = divclass;
		this.curclass = curclass;
		this.childrenclass = childrenclass;
		this.pageNo = pageNo;
		this.allsize = allsize;
		this.pageSize = pageSize;
		//分页字符串拼接，最后返回的是一个string，若是为空，则最后返回的是false;
		var str = "";
		var l_pageNo; //计算时用的页码;
		var c_pageNo; //实际上的当前页码;
		l_pageNo = c_pageNo = pageNo; //初始化为当前页码
		var allpage = Math.ceil(allsize / pageSize); //总页数
		//当总长度为0的时候，则，直接返回的是false
		if(allsize <= 0) {
			str = "";
		}
		//当长度不为空的时候
		else {
			str += '<span class="' + childrenclass + '" data-page="return"><<</span>';
			//当总页码小于等于5的时候，设置一页直接显示完整
			if(allpage <= 5) {

				for(var i = 1; i < allpage; i++) {
					if(i != c_pageNo) {
						str += '<span class="' + childrenclass + '" data-page="' + i + '">' + i + '</span>';
					} else {
						str += '<span class="' + curclass + '" data-page="' + i + '">' + i + '</span>';
					}
				}
			}
			//当页码大于5的时候，需要计算
			else {
				if(c_pageNo <= 3) {
					l_pageNo = parseInt(3);
				} else if(c_pageNo >= allpage - 2) {
					l_pageNo = parseInt(allpage - 2);
				} else {
					l_pageNo = parseInt(c_pageNo);
				}
				var min_page;
				var max_page;
				min_page = l_pageNo - 2;
				max_page = l_pageNo + 2;
				//画页面
				for(var i = min_page; i <= max_page; i++) {
					if(i != c_pageNo) {
						str += '<span class="' + childrenclass + '" data-page="' + i + '">' + i + '</span>';
					} else {
						str += '<span class="' + curclass + '" data-page="' + i + '">' + i + '</span>';
					}
				}
			}
			str += '<span class="' + childrenclass + '" data-page="Fast">>></span>';
		}
		$("." + divclass).append(str);
		_myjs.fenye.refresh(divclass, childrenclass, curclass, allsize, pageSize, pageNo);

	},
	//刷新页面。点击事件
	refresh: function(divclass, childrenclass, curclass, allsize, pageSize, pageNo) {
		var that = this;
		this.curclass = curclass;
		this.pageSize = pageSize;
		this.pageNo = pageNo;
		this.allsize = allsize;
		this.childrenclass = childrenclass;
		allpage = Math.ceil(allsize / pageSize); //总页数
		var l_pageNo = parseInt(pageNo);
		var l_childrenclass = "." + childrenclass;
		$(l_childrenclass).each(function() {
			$(this).bind("click", function() {
				switch($(this).attr("data-page")) {
					case 'Fast':
						l_pageNo += parseInt(page_fast);
						if(l_pageNo >= allpage) {
							l_pageNo = allpage;
						}
						break;
					case 'return':
						l_pageNo -= parseInt(page_Return);
						if(l_pageNo <= 1) {
							l_pageNo = 1;
						}
						break;
					default:
						l_pageNo = $(this).attr("data-page");
						break;
				}
				/*在这儿进行你的业务代码，成功调用*/
				//刷新页面
				_myjs.fenye.setfenye(divclass, childrenclass, curclass, allsize, pageSize, l_pageNo);
			});
		});
	},

}

html代码：

<!--
	作者：offline
	时间：2017-11-17
	描述：最好是1.x的jq
-->
<!DOCTYPE html>
<html>
	<style>
	.childrespan{	width:40px;height: 40px;line-height: 40px;font-size: 20px;border: 1px solid #000000;margin-left:5px;margin-bottom:5px;cursor:pointer;}
	.childre_choosespan{width:40px;height: 40px;line-height: 40px;font-size: 20px;background:#00aaf4;color:#ffffff;border: 1px solid #000000;margin-left:5px;margin-bottom:5px}
	</style>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<div class="div"></div>
	</head>
	<script type="text/javascript" src="jquery.js" ></script>
	<script type="text/javascript" src="new_file.js" ></script>
	<script>
	_myjs.fenye.setfenye("div","childrespan","childre_choosespan",3600,180,19);
</script>
	<body>
	</body>
</html>

代码已上传到我的资源