html+Jquery+Bootstrap实现数据分页
Bootstrap以及Jquery的下载
Bootstrap下载地址：https://v3.bootcss.com/
Jquery下载地址：https://jquery.com/
构建html页面
1.新建一个名字为paging的html页面
2.导入Bootstrap和Jquery
<html><head><meta charset="utf-8"><title></title></head><link href="../bootstraptest/css/bootstrap.min.css" rel="stylesheet"><script src="jquery/bootstrap.min.js"></script><script src="jquery/jquery-3.6.0.min.js"></script><body></body></html>3.编写一个分页的样式（修改bootstrpt的分页样式）
<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">«</span> </a> </li> <li class="" name="upPage"> <a aria-label="Next"> <span value="up">»</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+"'>"+item+"")})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;//当前页-1f1();f2();}if($("li[name='lowPage']").prop("class")==="disabled"){ } } //右翻页 if($(e.target).attr("value")==="up"){ if (nowPage==arry[arry.length-1]){}else {nowPage=nowPage+1;//当前页+1f1();f2();}if ($("li[name='upPage']").prop("class")==="disabled"){} } })})</script>演示
html+jquery+bootstrap实现数据分页
