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">«</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+"'><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实现数据分页