原生js分页

最新推荐文章于 2024-07-24 16:25:09 发布

李白和星星

最新推荐文章于 2024-07-24 16:25:09 发布

阅读量635

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_35469137/article/details/131398349

版权

文章展示了如何使用JavaScript和CSS实现一个简单的分页功能，包括获取总数据条数、设置每页显示数量、动态生成分页HTML以及处理分页点击事件。通过这个实例，读者可以理解分页的基本逻辑和代码实现。

摘要由CSDN通过智能技术生成

最近工作好忙工作中也遇到了很多问题也很久没有更新博客了闲下来继续更新吧大家一块学习

项目中要对数据进行分页处理一般分页我们都用插件比如elementui bootstrap之类的但其实原生的我们也应该理解思路理解思路有点代码功底自己也能调试出来

先看效果

上代码

样式

<style>
		.pager {
			padding: 0;
			margin: 0;
			white-space: nowrap;
			text-align: center;
		}

		.pager li {
			list-style: none;
			font-family: arial;
			font-size: 14px;
			padding: 2px;
			margin: 5px;
			border: #333 1px solid;
			text-align: center;
			border-radius: 5px;
			max-width: 80px;
			width: 25px;
			height: 22px;
			line-height: 22px;
			cursor: pointer;
			background: #fff;
			display: inline-block
		}

		.pager li:hover {
			border: #a11418 1px solid;
			color: #a11418;
			opacity: 0.8;
		}

		.pager li.pg-hidepage {
			display: none
		}

		.pager li.pg-prev,
		li.pg-next {
			width: 80px
		}

		.pager li.pg-selected {
			border: #a11418 1px solid;
			background: #a11418;
			color: white
		}

		.pager li.pg-selected:hover {
			color: #000;
			cursor: default
		}

		.pager li.pg-dislabel {
			color: #ccc;
			border: #ccc 1px solid;
			cursor: default
		}

		.pager li.pg-dislabel:hover {
			border: #ccc 1px solid
		}
	</style>

body:

<ul class="zblist clear" id="zblist">
								
</ul>
<--分页-->

<div id="pager"></div>

js:

我们首先需要知道一共有多少条数据（分多少页，接口请求来的总数据条数。可以先请求一次接口，拿到总条数）一页多少条数据（后端给的参数）

	<script>
			var countnum = 0 //总条数
			var data = {} 
			$.ajax({
				type: "POST",
				url: $.url('f/newsCenter/ajax_article_list'),
				data: {
					categoryId: '82efba2e6b0442f48a10c0f23b17e260',
					pageSize: 40,
					pageNo: 1,
				},
				success: function (res1) {
					if (res1.state == 1) {
						countnum = res1.data.page.count //获取总条数
						//console.log(countnum);
						var pager = document.getElementById("pager");
						var start = 0, end = 0;


						//加载分页
						loadPager(pager, {
							pageSize: 6,//每页显示条数
							totalCount: countnum,//总记录数
							curPage: 1,//当前页数，不设置则默认1
							nav_count: 5,//显示多少个导航
							callback: function (count) {//点击翻页后的回调函数
								data = {
									categoryId: '82efba2e6b0442f48a10c0f23b17e260',
									pageSize: 6,
									pageNo: count,
								}
								getdata()//再次根据分页请求数据
							}
						});
					}
				}
			})
			function loadPager(el, option) {
				var page_ul, pageSize, totalCount, curPage, nav_count, callback, totalPage, pagerId, nav_mid, nav_rela,
					prevName = '上一页', nextName = '下一页', firstName = '首页', lastName = '尾页',
					leftCount = 0, rightCount = 0,
					btn_dislabel = 'pg-dislabel', btn_selected = 'pg-selected', btn_hide = 'pg-hidepage';

				//初始化并设置一些默认值
				init();
				//显示分页
				el.innerHTML = genHtml();

				//给UL添加点击事件
				handleClick();

				//处理按钮
				handleBtn();

				//初次加载响应点击事件
				callback(curPage);

				function init() {
					var $option = option || {};
					pageSize = $option.pageSize || 10;
					totalCount = $option.totalCount || 0;
					curPage = $option.curPage || 1;
					nav_count = $option.nav_count || 0;
					callback = $option.callback || function () { };
					//计算总页数
					totalPage = parseInt(totalCount / pageSize) + ((totalCount % pageSize > 0) ? 1 : 0);
					pagerId = "pager_ul_" + Math.round(Math.random() * (9999 - 1000) + 1000);

					nav_mid = Math.round(nav_count / 2);
				}
				//生成显示分页的html
				function genHtml(pager) {
					var html = "<ul class='pager' id='" + pagerId + "'>";
					html += "<li class='pg-prev' id='first'>" + firstName + "</li>";
					html += "<li class='pg-prev' id='prev'>" + prevName + "</li>";
					for (var i = 0; i < totalPage; i++) {
						var page = (i + 1);
						if (i < nav_count) {//显示 
							html += "<li page='" + page + "' class='pg-showpage'>" + page + "</li>"
						} else {//隐藏
							html += "<li page='" + page + "' class='pg-hidepage'>" + page + "</li>"
						}
					}
					html += "<li class='pg-next' id='next'>" + nextName + "</li>";
					html += "<li class='pg-prev' id='last'>" + lastName + "</li>";
					html += "</ul>";
					return html;
				}

				function handleClick() {
					page_ul = document.getElementById(pagerId);
					//给UL添加事件
					document.addEventListener ?
						page_ul.addEventListener('click', handleUl) : page_ul.attachEvent('click', handleUl);

					function handleUl(e) {
						var e = e || window.event;
						var target = e.target || e.srcElement;

						if (target.tagName.toUpperCase() !== 'LI') return;
						//查找按钮是不是不可用的
						var index = findIndex(class2Array(target), [btn_dislabel, btn_selected]);
						if (index !== -1) {//如果是不可用的，则不响应点击
							return;
						}
						var page_val;//按钮选择后当前页的值
						//处理首页、上一页、下一页、尾页
						if (target.id === 'prev') {
							page_val = curPage - 1;
						} else if (target.id === 'next') {
							page_val = curPage + 1;
						} else if (target.id === 'first') {
							page_val = 1;
						} else if (target.id === 'last') {
							page_val = totalPage;
						} else {
							page_val = target.innerText;
						}
						curPage = parseInt(page_val);
						//每次选择要重新处理按钮
						handleBtn();
						//响应点击事件
						callback(curPage);
					}
				}

				function handleBtn() {
					//首页是否有效
					var first = page_ul.firstChild;
					if (curPage === 1) {
						handleClass(first, btn_dislabel, 'add');
					} else {
						handleClass(first, btn_dislabel, 'del');
					}
					//前一页按钮是否有效
					var prev = first.nextSibling;
					if (curPage === 1) {
						handleClass(prev, btn_dislabel, 'add');
					} else {
						handleClass(prev, btn_dislabel, 'del');
					}
					//nav_rela
					if (curPage === 1) {
						leftCount = 0;
					} else {
						nav_rela = curPage - nav_mid;
						leftCount = (leftCount + nav_rela) > 0 ? (leftCount + nav_rela) : 0;
						nav_mid += nav_rela;
					}
					if (curPage === totalPage) {
						rightCount = 0;
					} else {
						rightCount = totalPage - nav_count - leftCount;//右边隐藏节点数
					}

					//选择当前页
					for (var i = 1; i <= totalPage; i++) {
						var page = (i + 1);
						if (i == curPage) {//选择当前页
							if (curPage === 1 || curPage === totalPage) {
								handleClass(page_ul.childNodes[page], btn_hide, 'del');
							}
							handleClass(page_ul.childNodes[page], btn_selected, 'add');
						} else {
							if (leftCount <= 0 || rightCount <= 0) {//左右隐藏节点或者为0的时候，要另外处理
								if (leftCount <= 0) {
									if (i <= nav_count) {
										handleClass(page_ul.childNodes[page], btn_hide, 'del');
									} else {
										handleClass(page_ul.childNodes[page], btn_hide, 'add');
									}
								}
								if (rightCount <= 0) {
									if (i > totalPage - nav_count) {
										handleClass(page_ul.childNodes[page], btn_hide, 'del');
									} else {
										handleClass(page_ul.childNodes[page], btn_hide, 'add');
									}
								}
							} else {
								if (i <= leftCount) {
									handleClass(page_ul.childNodes[page], btn_hide, 'add');
								} else if (i > leftCount + nav_count) {
									handleClass(page_ul.childNodes[page], btn_hide, 'add');
								} else if (i <= (leftCount + nav_count)) {
									handleClass(page_ul.childNodes[page], btn_hide, 'del');
								}
							}
							handleClass(page_ul.childNodes[page], btn_selected, 'del');
						}
					}

					//最后一页按钮是否有效
					var last = page_ul.lastChild;
					if (curPage === totalPage || totalPage === 0) {
						handleClass(last, btn_dislabel, 'add');
					} else {
						handleClass(last, btn_dislabel, 'del');
					}
					//下一页按钮是否有效
					var next = last.previousSibling;
					if (curPage === totalPage || totalPage === 0) {
						handleClass(next, btn_dislabel, 'add');
					} else {
						handleClass(next, btn_dislabel, 'del');
					}

				}
				//将元素el的class转换成数组
				function class2Array(el) {
					var oldClass = el.className;
					if (!oldClass) return [];
					return oldClass.split(" ");
				}
				//添加或者删除当前el元素的指定class
				function handleClass(el, className, type) {
					var arr = class2Array(el);
					var index = findIndex(arr, className);

					if (type === 'add') {//添加
						if (index === -1) {
							arr.push(className);
						}
					} else {
						if (index !== -1) {//删除某个元素
							arr.splice(index, 1);
						}
					}

					el.className = arr.join(" ");
				}
				//根据传入的clas名来查到在数组中的下标
				function findIndex(arr, c) {
					if (c instanceof Array) {
						for (var i = 0; i < c.length; i++) {
							var num = findOnceIndex(arr, c[i]);
							if (num !== -1) {
								return num;
							}
						}
					} else {
						return findOnceIndex(arr, c);
					}
					return -1;
				}

				function findOnceIndex(arr, c) {
					for (var i = 0; i < arr.length; i++) {
						if (arr[i] === c) {
							return i;
						}
					}
					return -1;
				}
			}



			// var data = {
			// 	categoryId: '82efba2e6b0442f48a10c0f23b17e260',
			// 	pageSize: 6,
			// 	pageNo: pageNo,
			// }
			function getdata() {
				$.ajax({
					type: "POST",
					url: $.url('f/newsCenter/ajax_article_list'),
					data: data,
					success: function (res) {
						console.log(res);
						if (res.state == 1) {
							//院系
							
							var yxlist = res.data.page.list

							//console.log(yxlist);
							var yxstr = ``
							var zbliststr = ``
							for (var i = 0; i < yxlist.length; i++) {
								if (yxlist[i].subtitle == '') {
									zbliststr += `<li class="clear">
									<img src="${yxlist[i].imageSrc != '' ? yxlist[i].imageSrc : '../images/cms/index/img2.png'}" alt="" class="img">
									<div class="desc">
										<div class="tit">${yxlist[i].title}</div>
										<div class="bottom">
											<div class="time"><span>${new Date(yxlist[i].releaseDate).getFullYear()}</span>-<span>${new Date(yxlist[i].releaseDate).getMonth() + 1}</span>-<span>${new Date(yxlist[i].releaseDate).getDate()}</span>  <span>${new Date(yxlist[i].releaseDate).getHours()}</span>:<span>${new Date(yxlist[i].releaseDate).getMinutes()}</span></div>
											
										</div>
										<div class="btn"><a
											href="${yxlist[i].link
										}"
											style="width:100%;height: 100%;display: block;" target='_blank'></a></div>
									</div>
									
								</li>`
								}

							}

							$('#zblist').html(zbliststr)
							
						}
					}
				})
			}
			

		</script>