Bootstrap以及Jquery的下载

Bootstrap下载地址：https://v3.bootcss.com/ Jquery下载地址：https://jquery.com/

构建html页面

1.新建一个名字为paging的html页面 2.导入Bootstrap和Jquery

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- 链接到下载好的bootstrpt样式 -->
	<link href="../bootstraptest/css/bootstrap.min.css" rel="stylesheet">
	<!--导入bootstrap-->
	<script src="jquery/bootstrap.min.js"></script>
	<!--导入jquery-->
	<script src="jquery/jquery-3.6.0.min.js"></script>
	<body>
	</body>
</html>

3.编写一个分页的样式（修改bootstrpt的分页样式）在这里插入图片描述

<!--分页的html脚本-->
<body>
		<div class="row" style="text-align: center">
				 <nav aria-label="Page navigation">
					 <ul class="pagination">
		
						<!-- 左翻页 -->
						 <li class="" name="lowPage">
							 <a aria-label="Previous">
								 <span value="low">&laquo;</span>
							 </a>
						 </li>
						 
						<!-- 分页数字按钮将在此处动态生成 -->
						
						<!-- 右翻页 -->
						 <li class="" name="upPage">
							 <a aria-label="Next">
								 <span value="up">&raquo;</span>
							 </a>
						 </li>
		
					 </ul>
				 </nav>
	</body>

4.编写jquery脚本实现分页功能

<script>
		//用于标注当前是第几页
		var nowPage=1;
		//数组遍历,分页数
		var arry=[1,2,3,4,5];
		
		//用于切换选中与未被选中
		function f1(){
			//设置当前页为活动
			$("#pagenow"+nowPage).prop("class","active");
			
			//设置其他页也为静态(属性选择器与过滤选择器合用)
			$("li[title='pagenow']:not(#pagenow"+nowPage+")").prop("class","");
		}
		
		//用于设置翻页按钮是否被禁用
		function f2(){
			//判断当前页是否是最后一页,如果为最后一页则将右翻页按钮设置成不可用
			if(nowPage==arry[arry.length-1]){
			   $("li[name='upPage']").prop("class","disabled");
			   console.log("右翻页被禁用");
			}else{
				$("li[name='upPage']").prop("class","");
			}
			
			//判断当前页是否是第一页,如果为第一页则将左翻页按钮设置成不可用
			if (nowPage==1){
			    $("li[name='lowPage']").prop("class","disabled");
				console.log("左翻页被禁用");
			}else{
				$("li[name='lowPage']").prop("class","");
			}
		}
		
		$(function(){
			// index是下标，item是值
			$.each(arry,function(index,item){
				// 动态创建分页按钮
				$("li[name=upPage]").before("<li id='pagenow"+item+"' class='' title='pagenow' name='"+item+"'><a>"+item+"<span class='sr-only'></span></a></li>")
			})
			f1();
			f2();
			
			
			//当数字按钮被点击时
			//同时为多个元素添加事件
			$("li[title='pagenow']").click(function(e){
				nowPage=parseInt(e.target.innerText);
				f1();
				f2();
			})
			
			
			
			//当翻页按钮被点击时
			//同时为多个元素添加事件(属性选择器)
			$("a[aria-label]").click(function(e){
			  //判断是哪个翻页按钮,e.target是span
			  
			  //左翻页
			  if ($(e.target).attr("value")==="low"){
			    if (nowPage==1){
			    }
				else {
					nowPage=nowPage-1;//当前页-1
					f1();
					f2();
				}
				if($("li[name='lowPage']").prop("class")==="disabled"){    
				}
			  }
			  
			  //右翻页		
			  if($(e.target).attr("value")==="up"){
			    if (nowPage==arry[arry.length-1]){   
			    }
				else {
					nowPage=nowPage+1;//当前页+1
					f1();
					f2();
				}
				if ($("li[name='upPage']").prop("class")==="disabled"){
				}
			  }
			  
			})	
		})
	</script>

演示

html+jquery+bootstrap实现数据分页

html+Jquery+Bootstrap实现数据分页

Bootstrap以及Jquery的下载

构建html页面

演示