来自 google sheet 的 Javascript 分页 JSON 数据

Question

如您所知，我在这里从 google 工作表中获取一些 JSON 日期，此外我希望使用分页在每页仅包含三个记录的页面上对这些数据进行排序，并使用 prev/next 函数在不更新的情况下进行动态更新页面重新加载。

此刻我一直在尝试将 JSON 数据连接到分页函数以确定数据长度并对多页中的记录进行排序。

如何让 JSON 数据在多个页面中自行排序，同时使用 next/prev 在页面之间导航？

var url = "https://spreadsheets.google.com/feeds/list/1xo6dUfcVOwPA5Lkd8pKevLj6lP-0gOaPXNBZk4jyuGw/od6/public/values?alt\u003djson";

var perPage = 3;
var currentPage = 1;

$.getJSON(url, function(data) {
    var output = "";
    var length = data.length;
    
    $.each(data.feed.entry, function(index,value) {
       output += "Category: " + value.gsx$largeimage.$t + "</br>"+
                 "Name: " + value.gsx$imagetitle.$t + "</br></br>";
    });
    $(".test").append(output);
});

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

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

function changePage(page)
{
  // ??
}

function numPages()
{
    return Math.ceil(length / perPage);
}

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

Answer 1

• 您希望每隔 perPage 翻页从电子表格中检索到的数据.

如果我的理解是正确的，这个修改怎么样？我认为您的情况有几种方法。因此，请将其视为其中之一。

修改后的脚本流程如下。

1. 从电子表格中检索所有数据。那时，显示第一个页面。
2. 点击“Next”或“Prev”时，<div class="test"></div>的内容已清除。
3. 使用从电子表格和 currentPage 检索到的数据放置下一页.

修改后的脚本:

var url = "https://spreadsheets.google.com/feeds/list/1xo6dUfcVOwPA5Lkd8pKevLj6lP-0gOaPXNBZk4jyuGw/od6/public/values?alt\u003djson";

var perPage = 3;
var currentPage = 1;
var values = []; // Added

// Modified
$.getJSON(url, function(data) {
  var output = "";
  $.each(data.feed.entry, function(index,value) {
    values.push({Category: value.gsx$largeimage.$t, Name: value.gsx$imagetitle.$t});
    if (index < perPage) {
      output += "Category: " + value.gsx$largeimage.$t + "</br>"+
                "Name: " + value.gsx$imagetitle.$t + "</br></br>";
    }
  });
  $(".test").append(output);
});

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

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

// Modified
function changePage() {
  $(".test").html("");
  var start = (currentPage - 1) * perPage;
  var output = values.slice(start, start + perPage).reduce((s, e) => {
    return s += "Category: " + e.Category + "</br>"+
                "Name: " + e.Name + "</br></br>";    
  }, "");
  $(".test").append(output);
}

// Modified
function numPages() {
  return Math.ceil(values.length / perPage);
}

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

如果我误解了您的问题并且这不是您想要的结果，我深表歉意。