问题:通过调Ajax接口,我怎么把分页和数据相关联,仿的网易云。我的想法是通过设置参数,通过点击刷新接口的数据,但是没成功。
html可以不用管,通过JS已经完成加载。
<div class="Ly-pager">
<div class="u-page">
<!-- <a href="javascript:void(0)" class="zbtn zprv js-disabled">上一页</a>
<a href="#" class="zpgi js-selected">1</a>
<a href="#" class="zpgi">2</a>
<a href="#" class="zpgi">3</a>
<a href="#" class="zpgi">4</a>
<a href="#" class="zpgi">5</a>
<a href="#" class="zpgi">6</a>
<a href="#" class="zpgi">7</a>
<a href="#" class="zpgi">8</a>
<span class="zdot">...</span>
<a href="#" class="zpgi">19</a>
<a href="#" class="zbtn znxt">下一页</a> -->
</div>
</div>
接口
window.addEventListener('load', function () {
oTab();
oSingger();
makePage(total, 1);
});
function oTab() {
let oBtnLink = document.querySelector('#Ly-wraotopLink');
let oCateListBox = document.querySelector('#cateListBox');
let flag = true;
oBtnLink.onclick = function () {
if (flag) {
oCateListBox.classList.remove('none');
} else {
oCateListBox.classList.add('none');
}
flag = !flag;
}
}
//生成页码
let total = 20;
function makePage(total, page) {
let str1 = '';
let sort = `<span class="zdot">...</span>`;
if (page > 1 && total > 1) { // 上一页
str1 += `<a href="javascript:void(0)" class="zbtn zprv" onclick="previous()">上一页</a>`;
} else {
str1 += `<a href="javascript:void(0)" class="zbtn zprv js-disabled">上一页</a>`;
}
function createPage(index) { //单页码生成
// console.log(index);
// console.log(page);
if (page == index) {
//当前页(或选中)样式 多了个selected(换背景色字体色的)
str1 += `<a href="javascript:void(0)" class="zpgi js-selected">${page}</a>`;
} else {
str1 += `<a href="javascript:void(0)" class="zpgi" onclick="pageClick(this)">${index}</a>`;
}
console.log(page);
}
if (total <= 10) {
for (let i = 0; i <= total; i++) {
createPage(i);
}
console.log(i);
} else {
if (page <= 8) { //总页数大于10且当前页远离总页数(小于8)
for (let i = 1; i <= 9; i++) {//显示1-9
createPage(i);
}
//三个点...
str1 += sort;
//三个点后面 生成最后一个页数
createPage(total);
} else if (page > total - 7) { //总页数大于10且当前页接近总页数(大于总页数-7)
//第一页
createPage(1);
//三个点...
str1 += sort;
//生成最后7个页数
for (let i = total - 7; i <= total; i++) {
createPage(i);
}
} else { //除开上面两个情况 当前页在中间
//页数1
createPage(1);
//三个点...
str1 += sort;
//生成当前页和 前跟后一个页数
for (let i = page - 3; i <= page + 3; i++) {
createPage(i);
}
//三个点...
str1 += sort;
//最后一个页数
createPage(total);
}
}
if (page < total && total > 1) { // 下一页
str1 += `<a href="javascript:void(0)" class="zbtn znxt" onclick="next()">下一页</a>`;
} else {
str1 += `<a href="javascript:void(0)" class="zbtn znxt js-disabled">下一页</div>`;
}
//赋值生成html
$('.u-page').html(str1);
}
//上一页点击事件
function previous() {
//获取当前页
let page = $('.u-page>.js-selected').text();
if (page <= 1) {
return;
}
makePage(total, page * 1 - 1);
}
//下一页点击事件
function next() {
//获取当前页
let page = $('.u-page>.js-selected').text();
if (page >= total) {
return;
}
makePage(total, page * 1 + 1);
}
//直接点击页数事件
function pageClick(that) {
let page = $(that).html();
makePage(total, page * 1);
}
**//还有offset是分页,我只调了limit,后面应该还有offset**
function oSingger(cat = '全部',limit = 35) {
ajax({
url: `/top/playlist?cat=${cat}&limit=${limit}`,
success: e => {
if (e.code === 200) {
let str = '';
let playLists = (e.playlists).filter((name) => name.name);
let oContainer = document.querySelector('#Ly-container');
for (let i = 0; i < playLists.length; i++) {
let { creator, coverImg, shareCount } = { creator: playLists[i].creator, coverImg: playLists[i].coverImgUrl, shareCount: playLists[i].shareCount };
let oDetail = playLists[i].creator.avatarDetail;
if (playLists[i]?.creator?.avatarDetail?.identityIconUrl || '') {
str += `<li>
<div class="Ly-cover Ly-cover-1">
<img src="${coverImg}" alt="" class="Ly-Jflag">
<a href="#" title="${playLists[i].name}" class="Ly-msk"></a>
<div class="Ly-cover-bottom">
<a class="icon-play f-fr" title="播放" href="javascript:;" data-res-type="13" data-res-id="2364025740" data-res-action="play"></a>
<span class="icon-headset"></span>
<span class="nb">${shareCount}万</span>
</div>
</div>
<p class="Ly-dec">
<a title="${playLists[i].name}" href="#" class="tit f-thide s-fc0">${playLists[i].name}</a>
</p>
<p>
<span class="s-fc4">by</span>
<a title="${creator.nickname}" href="#" class="nm nm-icn f-thide s-fc3">${creator.nickname}</a>
<img style="height:13px;width:13px;display:inline-block;vertical-align:middle;" src="${oDetail.identityIconUrl}">
</p>
</li>`
}
oContainer.innerHTML = str;
}
}
}
})
}
这是我做的效果图
你这里的接口参数offset可用于分页,请求的时候加上offset