后台返回一堆数据让前端处理分页查询

javascript xue8 111天前 117次浏览



问个问题\xa0\xa0上一页和下一页的区别不是在当前页数的基础上加1或者减一吗
<!DOCTYPE html>


<head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>分页</title>
<script type="text/javascript" src="../js/jquery-1.11.3.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><a href="#" id="prev">上一页</a></span>
<div id="page" style="margin:0 auto;"></div>
<span><a href="#" id="next">下一页</a></span>
</div>

</div>
<script type="text/javascript">
$(function() {
$.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; //记录条数
console.log(Count)
var PageSize = 99; //设置每页示数目
var PageCount = Math.ceil(Count / PageSize); //计算总页数
console.log(PageCount)
var currentPage = 1; //当前页,默认为1
//分页按钮
for (var i = 1; i <= PageCount; i++) {
// var pageN = \'<span></span><a href="#" selectPage="\' + i + \'" >第\' + i + \'页</a>\';
var pageN = \'<a href="#" selectPage="\' + i + \'" >\' + i + \'</a>\';
$(\'#page\').append(pageN);
}
var arr1 = goodsListData.slice((currentPage - 1) * PageSize, currentPage * PageSize);
console.log(arr1)
var dataStr = \'\';
for (var i = 0; i < arr1.length; i++) {
var MacNo = arr1[i].MacNo
dataStr += "<label><input name=\'GoodsName\' type=\'checkbox\' value=" + MacNo + " /><i>" + MacNo + "</i></label>"
}
$("#shoplist11 ").html(dataStr);
var selectPage = "";
//显示选择页的内容
function pageGet() {
$(\'#shoplist11\').html(\'\');
var arr2 = goodsListData.slice((selectPage - 1) * PageSize, selectPage * PageSize);
// console.log(arr2)
var dataStr = \'\';
for (var i = 0; i < arr2.length; i++) {
var MacNo = arr2[i].MacNo
dataStr += "<label><input name=\'GoodsName\' type=\'checkbox\' value=" + MacNo + " /><i>" + MacNo + "</i></label>"
}
$("#shoplist11 ").html(dataStr);
}
$(\'#page a\').click(function() {
selectPage = $(this).attr(\'selectPage\');
if (!isNaN(selectPage)) {
//移除之前的active
$("#page a").removeClass("active");
$(this).attr("class", "active");
// $("#currentPage").val(str);
}
console.log(selectPage);
pageGet()

});

$("#prev").click(function() {
console.log(selectPage);
console.log("上一页")
prev();
})
$("#next").click(function() {
next();
})

function next() {
console.log(selectPage);
console.log(PageSize)
$(\'#shoplist11\').html(\'\');
var arr2 = goodsListData.slice((selectPage - 1 + 1) * PageSize, (selectPage + 1) * PageSize);
console.log(arr2)
var dataStr = \'\';
for (var i = 0; i < arr2.length; i++) {
var MacNo = arr2[i].MacNo
dataStr += "<label><input name=\'GoodsName\' type=\'checkbox\' value=" + MacNo + " /><i>" + MacNo + "</i></label>"
}
$("#shoplist11 ").html(dataStr);
}

},
error: function() {

}
});
});
</script>

</body>


</html>### 问题描述


问题出现的环境背景及自己尝试过哪些方法


相关代码


// 请把代码文本粘贴到下方(请勿用图片代替代码)


你期待的结果是什么?实际看到的错误信息又是什么?





回答:

selectPage最好初始化为1.不要随便赋值,虽然JS是动态类型,但是严格一点利大于弊,扯远了,看你代码selectPage用来表示显示的页数,初始值改为1后,其实next和prev的函数就很简单了,就是selectPage ++ 或者--然后调用pageGet()就可以了。不需要那么多重复代码
【PS:题外话,代码可以写的再“优雅”点,借用曾经在书上看过的一句话——代码是写给人看的,它只是偶尔让计算机执行一下】


0条回复
撰写答案