如何将谷歌表格JSON数据接入无刷新分页功能（每页3条）？

我帮你搞定这个分页问题！你现在的核心卡点是没把获取到的JSON条目存下来供分页函数调用，而且对Google Sheets返回的JSON结构处理有点小偏差，咱们直接上修改后的完整代码，再一步步说关键改动：

完整可运行代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test"></div>
<a href="javascript:prevPage()" id="btn_prev">Prev</a>
<a href="javascript:nextPage()" id="btn_next">Next</a>
page: <span id="page"></span>

<script>
var url = "https://spreadsheets.google.com/feeds/list/1xo6dUfcVOwPA5Lkd8pKevLj6lP-0gOaPXNBZk4jyuGw/od6/public/values?alt=json";
var perPage = 3;
var currentPage = 1;
var entries = []; // 用来存所有获取到的条目，供分页函数使用

$.getJSON(url, function(data) {
    // 把Google Sheets返回的条目数组存到全局变量里
    entries = data.feed.entry;
    // 初始化显示第一页
    changePage(currentPage);
});

function prevPage() {
    if (currentPage > 1) {
        currentPage--;
        changePage(currentPage);
    }
}

function nextPage() {
    if (currentPage < numPages()) {
        currentPage++;
        changePage(currentPage);
    }
}

function changePage(page) {
    var output = "";
    // 计算当前页的起始和结束索引
    var startIndex = (page - 1) * perPage;
    var endIndex = startIndex + perPage;
    // 截取当前页要显示的条目
    var currentEntries = entries.slice(startIndex, endIndex);
    
    // 渲染当前页的内容
    $.each(currentEntries, function(index, value) {
        output += "Category: " + value.gsx$largeimage.$t + "<br>" + "Name: " + value.gsx$imagetitle.$t + "<br><br>";
    });
    
    // 更新页面内容和页码显示
    $(".test").html(output);
    $("#page").text(page + " / " + numPages());
    
    // 可选优化：根据当前页禁用/启用按钮
    $("#btn_prev").prop("disabled", currentPage === 1);
    $("#btn_next").prop("disabled", currentPage === numPages());
}

function numPages() {
    // 用存好的条目数组长度计算总页数
    return Math.ceil(entries.length / perPage);
}
</script>

关键改动说明 #

• 全局存储条目数组：新增entries变量，把data.feed.entry（这才是真正的记录数组）存起来，这样分页函数能随时访问到所有数据。
• 修正数据长度获取：原来的data.length是错的，因为data是整个JSON对象，真正的记录数是entries.length。
• 实现changePage核心逻辑：
  1. 根据当前页码计算要显示的条目索引范围：(page-1)*perPage到page*perPage
  2. 用slice()截取对应范围的条目
  3. 重新渲染页面内容，同时更新页码显示
• 初始化渲染：获取到数据后立刻调用changePage(1)，显示第一页内容
• 按钮状态优化：可选地禁用第一页的上一页按钮、最后一页的下一页按钮，提升用户体验

这样就能实现你要的每页3条记录、无刷新切换的分页功能啦！

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