ajax数据和分页的问题

问题:通过调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>

接口

img

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;
                }

            }
        }
    })
}


这是我做的效果图

img


这是网易官网的效果图
https://music.163.com/#/discover/playlist

你这里的接口参数offset可用于分页,请求的时候加上offset

img