如何为YouTube播放列表添加无刷新分页（nextPageToken使用）

关键修改点： #

• 新增全局变量存储当前分页的pageToken，以及API返回的nextPageToken和prevPageToken
• 添加分页控制按钮，实现无刷新切换页面
• 动态修改请求参数options中的pageToken，修复未定义报错
• 每次加载新分页时清空原有视频列表，避免重复追加

修改后的完整代码： #

$(document).ready(function () {
    var key = '[YOUR API KEY HERE]';
    var playlistId = 'PL2fnLUTsNyq7A335zB_RpOzu7hEUcSJbB';
    var URL = 'https://www.googleapis.com/youtube/v3/playlistItems';
    
    // 新增分页相关变量
    var currentPageToken = null;
    var nextPageToken = null;
    var prevPageToken = null;

    var options = {
        part: 'snippet',
        key: key,
        maxResults: 50,
        playlistId: playlistId
    };

    // 添加分页按钮的HTML结构
    $('body').append(`
        <div class="pagination">
            <button id="prevBtn" disabled>上一页</button>
            <button id="nextBtn">下一页</button>
        </div>
    `);

    loadVids();

    // 修改loadVids函数，支持传入pageToken参数
    function loadVids(pageToken = null) {
        // 动态设置pageToken，不存在则删除该属性避免API报错
        if (pageToken) {
            options.pageToken = pageToken;
        } else {
            delete options.pageToken;
        }

        $.getJSON(URL, options, function (data) {
            // 更新分页token
            nextPageToken = data.nextPageToken;
            prevPageToken = data.prevPageToken;
            currentPageToken = pageToken;

            // 更新按钮状态
            $('#prevBtn').prop('disabled', !prevPageToken);
            $('#nextBtn').prop('disabled', !nextPageToken);

            // 清空原有视频列表，再渲染新内容
            $('main').empty();
            // 若当前是第一页，自动加载第一个视频作为主视频
            if (!currentPageToken) {
                var id = data.items[0].snippet.resourceId.videoId;
                mainVid(id);
            }
            resultsLoop(data);
        });
    }

    function mainVid(id) {
        $('#video').html(`
            <iframe width="560" height="315" src="https://www.youtube.com/embed/${id}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        `);
    }

    function resultsLoop(data) {
        $.each(data.items, function (i, item) {
            var thumb = item.snippet.thumbnails.medium.url;
            var title = item.snippet.title;
            var desc = item.snippet.description.substring(0, 100);
            var vid = item.snippet.resourceId.videoId;

            $('main').append(`
                <article class="item" data-key="${vid}">
                    <img src="${thumb}" alt="" class="thumb">
                    <div class="details">
                        <h4>${title}</h4>
                        <p>${desc}</p>
                    </div>
                </article>
            `);
        });
    }

    // 视频项点击事件
    $('main').on('click', 'article', function () {
        var id = $(this).attr('data-key');
        mainVid(id);
    });

    // 分页按钮点击事件
    $('#prevBtn').click(function() {
        loadVids(prevPageToken);
    });

    $('#nextBtn').click(function() {
        loadVids(nextPageToken);
    });
});

核心细节解释： #

1. 分页token管理：通过currentPageToken、nextPageToken、prevPageToken三个变量存储API返回的分页标识，每次请求时动态传入options中。如果没有token，会删除options.pageToken属性，避免API因无效参数报错。
2. 按钮状态控制：根据API返回的token是否存在，禁用/启用上一页/下一页按钮，避免无效点击。
3. 列表更新逻辑：每次加载新分页前调用$('main').empty()清空原有内容，防止视频项重复追加。
4. 主视频加载优化：仅在第一页（无pageToken时）自动加载第一个视频作为主视频，切换分页后保持当前主视频不变，提升用户体验。

内容的提问来源于stack exchange，提问作者Dee