时间戳

首页 > 解决方案 > 如何应用 pagination.js 处理 Google 表格 json

jquery - 如何应用 pagination.js 处理 Google 表格 json

问题描述

我正在尝试使用 pagination.js 从 Google 表格中调用 json 并呈现数据。但是，我似乎无法将 jquery 调用中的数据传递到数据显示中。我已将数据记录到控制台中，但似乎无法将其传递给模板函数。谁能告诉我在这个 codepen 中传递数据时我做错了什么：https ://codepen.io/stewartjohn/pen/VBzNdq 。

function simpleTemplating(data) {
  var html = '<ul>';
  $.each(data, function(index, value) {
    html += '<li>' + value.gsx$title.$t + '</li>';
  });
  html += '</ul>';
  return html;
};

var sheetUrl = 'https://spreadsheets.google.com/feeds/list/1cOLwDw0BzgTLHf_1VHszFlB4jACFkH3Iva21aIA4Zb8/1/public/values?alt=json'

$('#pagination-container').pagination({
  dataSource: function() {
    var xhr = new XMLHttpRequest()
    var self = this
    xhr.open('GET', sheetUrl)
    xhr.onload = function() {
      self.entries = JSON.parse(xhr.responseText)
      self.entries = self.entries.feed.entry
      console.log(self.entries)
    }
    xhr.send()
  },
  pageSize: 6,
  totalNumber: 34,
  callback: function(data, pagination) {
    var html = simpleTemplating(data);
    $('#data-container').html(html);
  }
})

标签： jquery

解决方案

如果我正确地理解了您的要求，那么这可以通过重新整理您的代码来实现（这是我的代码笔显示完整的解决方案）。

通过将调用paginagation()插件的代码转移到 xhr 的onload处理程序中，从服务器返回的条目可以按如下方式分页：

// Invoke the ajax request first
var xhr = new XMLHttpRequest()
xhr.open('GET', sheetUrl)
xhr.onload = function () {       

  var entries = JSON.parse(xhr.responseText)
  entries = entries.feed.entry
  console.log(entries)

  // Once data has been loaded, then setup your paginataion instance and load 
  // the entries into the paginataion plugin
  $('#pagination-container').pagination({
      dataSource: entries,
      pageSize: 6,
      totalNumber: 34,
      callback: function(data, pagination) {
          var html = simpleTemplating(data);
          $('#data-container').html(html);
      }
  })
}

xhr.send()

推荐阅读