jq实现简易的前端分页

最新推荐文章于 2024-05-05 00:38:54 发布

前端_黑喂狗

最新推荐文章于 2024-05-05 00:38:54 发布

阅读量1.2k

点赞数 2

分类专栏： javaScript 文章标签：前端分页

本文链接：https://blog.csdn.net/weixin_43891482/article/details/90048613

版权

javaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>前端分页</title>
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 500px;
				height: 250px;
				border: 2px solid black;
				margin: 0 auto;
				text-align: center;
				/*line-height: 250px;*/
				font-size: 48px;
				margin-top: 130px;
				color: white;
				background-color: pink;
			}
			li{
				list-style: none;
			}
			#nav{
				text-align: center;
				margin-top: -10px;
			}
			.box{
				width: 1000px;
				height: auto;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<!--显示数据的盒子-->
		<ul id="box">
			<!--<li>box</li>-->
		</ul>		
		<!--分页的按钮-->
		<div class="box">
			<nav aria-label="Page navigation" id="nav">
			  <ul class="pagination">
			    <li>
			      <a href="#" aria-label="Previous" id="pre">
			        <span aria-hidden="true">&laquo;</span>
			      </a>
			    </li>
			    <li class="a"><a href="#">1</a></li>
			    <li class="a"><a href="#">2</a></li>
			    <li class="a"><a href="#">3</a></li>
			    <li class="a"><a href="#">4</a></li>
			    <li class="a"><a href="#">5</a></li>
			    <li>
			      <a href="#" aria-label="Next" id="next">
			        <span aria-hidden="true">&raquo;</span>
			      </a>
			    </li>
			  </ul>
			</nav>			
		</div>
		<script type="text/javascript">
			$(function  () {
				paging(page);
			})
			//需要显示的数据
			var arr=["张学友","梁朝伟","刘德华","郭富城","周杰伦","张震岳","詹姆斯","哈登","乔丹","科比","林书豪","韦德","约翰逊","张伯伦","欧文"];
			//将数据存储到localStorage之中去；localStorage只能存储字符串，如果需要存储对象，首先要转化为字符串。利用JSON.stringify()；
			localStorage.setItem('str',JSON.stringify(arr));//把数组的数据存储到本地存储当中；
			//取用数据
			var shuju=JSON.parse(localStorage.getItem('str'));//将取用的数据转换为对象
			console.log(shuju)
			//定义每一页所显示的数据
			var pagenum=3;//每一页都显示三条的数据; 0123  3456 6789
			//需要定义开始的索引值 + 结束的索引值;
			//定义页码：page
			var page=1; //给一个默认值 然后每次点击都去++或者--
			//定义默认值
			var moren=0;
			//绑定点击事件
			$("#next").on('click',function  () {
				if (page<5) {
					page++;
					paging(page);					
				} else{
					alert("没有下一页了！")
				}

			})
			//分页的函数 
			function paging (page) {
//				console.log(page)
				//开始的索引值为
				var pagestart=(page-1)*pagenum;
				//结束的索引值为
				var pageend=page*pagenum;	
				var data=shuju.slice(pagestart,pageend);
				var html="";
				// 遍历获得的数据并且渲染到页面上
				for(var i in data){
					html+="<li>"+data[i]+"</li>";
				}
				$("#box").html(html);
				
			}
			//点击上一页时的效果
			//绑定点击事件
			$("#pre").on('click',function  () {
				if (page>1) {
					page--;
					paging(page);					
				} else{
					alert("没有上一页了");
				}
				
			})
			//点击对应的页面显示对应的数据
			$(".a").on('click',function  () {
				page=$(this).index();
				paging(page);
			})
		</script>
	</body>
</html>

简单的分页实现原理，还可以增加根据总的数据条数和每一页需要显示的数据量来动态的显示页码数量

前端_黑喂狗

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
jq实现简易的前端分页

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>前端分页</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script&g...
复制链接

扫一扫

专栏目录