极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>分页</title>
<script type="text/javascript" src="[https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js](https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js)"></script>
<style type="text/css">
.table {
border: solid #FFAEB9;
border-width: 1px 0px 0px 1px;
width: 100%;
font-size: 12px;
line-height: 21px;
text-align: center;
}
.table thead td {
border: solid #FFAEB9;
border-width: 0px 1px 1px 0px;
}
.table tbody td {
border: solid #FFAEB9;
border-width: 0px 1px 1px 0px;
padding-right: 5px;
padding-left: 5px;
}
.active {
background-color: #7FFFAA;
}
page a {
padding: 5px;
margin: 5px;
border: 1px solid black
}
</style>
</head>
<body>
<div style="width:80%;margin:0 auto;">
<div id="dataShow" style="margin:0 auto;">
<ul id="shoplist11">
</ul>
</div>
<br/>
<div>
<span>上一页</span>
<div id="page" style="margin:0 auto;"></div>
<span>下一页</span>
</div>
</div>
<script type="text/javascript">
/**
* @description: 分页
* @param {arr} 数组数据
* @param {currentPage} 当前页数
* @param {pageSize} 页大小
* @return
*/
function pagination(arr,currentPage,pageSize){
console.log(currentPage,pageSize)
let data = arr.slice((currentPage-1)*pageSize, currentPage*pageSize)
$("#shoplist11 ").html("");
var dataStr = '';
for (var i = 0; i < data.length; i++) {
var MacNo = data[i].MacNo
dataStr += "<label><input name='GoodsName' type='checkbox' value=" + MacNo + " />" + MacNo + "</label>"
}
$("#shoplist11 ").html(dataStr);
if (!isNaN(currentPage)) {
//移除之前的active
$("#page a").removeClass("active");
if(currentPage>=1){
let actEle = $("#page a")[currentPage-1]
console.log(actEle)
$(actEle).addClass("active");
}
// $("#currentPage").val(str);
}
}
$(function() {
var currentPage = 1; //当前页，默认为1
$.ajax({
type: "POST",
dataType: "json",
url: "https://ts.youcoffee.com.cn//admin/model/homead/parameter.php", //url
success: function(result) {
console.log(result)
goodsListData = result.data.MacList;
var Count = goodsListData.length; //记录条数
var PageSize = 99; //设置每页示数目
var PageCount = Math.ceil(Count / PageSize); //计算总页数
// 分页按钮显示
for (var i = 1; i <= PageCount; i++) {
// var pageN = '<span></span>第' + i + '页';
var pageN = '' + i + '';
$('#page').append(pageN);
}
// 首次加载第一页数据
pagination(goodsListData,currentPage,PageSize)
// 点击页数
$('#page a').click(function() {
currentPage = parseInt($(this).attr('selectPage'))
pagination(goodsListData,currentPage,PageSize)
});
// 上一页
$("#prev").click(function() {
console.log("上一页")
console.log(currentPage)
if(currentPage>1){
currentPage = currentPage-1
}
pagination(goodsListData,currentPage,PageSize)
})
// 下一页
$("#next").click(function() {
console.log("下一页")
console.log(currentPage)
if(currentPage<PageCount){
currentPage = currentPage+1
}
pagination(goodsListData,currentPage,PageSize)
})
},
error: function() {
}
});
});
</script>
</body>
</html>
selectPage最好初始化为1.不要随便赋值，虽然JS是动态类型，但是严格一点利大于弊，扯远了，看你代码selectPage用来表示显示的页数，初始值改为1后，其实next和prev的函数就很简单了，就是selectPage ++ 或者--然后调用pageGet(）就可以了。不需要那么多重复代码
【PS：题外话，代码可以写的再“优雅”点，借用曾经在书上看过的一句话——代码是写给人看的，它只是偶尔让计算机执行一下】