<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./res/css2022/bootstrap-4.6.1-dist/css/bootstrap.css">
<script src="./res/css2022/js/jquery-3.5.1.min.js"></script>
</head>
<body>
<div class="fenye">
<ul class="pagination">
<li class="page-item {#[class]#}" data-index="{#[index]#}"><a class="page-link" style="cursor: pointer;">{#[page]#}</a></li>
</ul>
</div>
</body>
<script>
var html = $(".pagination").html();
$(".pagination").html('');
var pageOptions = {
PageIndex: 1, //当前页码
RecordCount: 100, //总页数
TotalPage: 10, //一页多少条
showPageCount: 0, //页面显示页码数量
}
pageOptions.showPageCount = pageOptions.RecordCount / pageOptions.TotalPage;
function bianli(html,json){
for (const key in json) {
html = html.replace("{#["+key+"]#}",json[key])
}
return html
}
function aaa(){
$(".pagination").html('');
$(".pagination").append(bianli(html,{index:pageOptions.PageIndex <= 1?1:pageOptions.PageIndex-1,page:'上一页',class:1 == pageOptions.PageIndex?'disabled':''}))
if(pageOptions.PageIndex <= 3){
for (let i = 1; i < 6; i++) {
$(".pagination").append(bianli(html,{index: i,page:i,class:i == pageOptions.PageIndex?'active':''}))
}
}else if(pageOptions.PageIndex >= pageOptions.showPageCount-2){
for (let i = pageOptions.showPageCount-4; i < pageOptions.showPageCount + 1; i++) {
$(".pagination").append(bianli(html,{index: i,page:i,class:i == pageOptions.PageIndex?'active':''}))
}
}else{
for (let i = pageOptions.PageIndex - 2; i < pageOptions.PageIndex + 3; i++) {
$(".pagination").append(bianli(html,{index: i,page:i,class:i == pageOptions.PageIndex?'active':''}))
}
}
$(".pagination").append(bianli(html,{index:pageOptions.PageIndex >= pageOptions.showPageCount-1?pageOptions.showPageCount:pageOptions.PageIndex+1,page:'下一页',class:pageOptions.showPageCount == pageOptions.PageIndex?'disabled':''}))
$(".pagination>li").click(function(){
pageOptions.PageIndex = parseInt($(this).attr("data-index"));
aaa();
})
};
aaa();
</script>
</html>
jquery,bootstrap实现页码选择
最新推荐文章于 2023-09-13 21:05:50 发布