如何使用下一个 prev 访问博客文章链接列表答案

【问题标题】：how to access blogger post link list with next prev如何使用下一个 prev 访问博客文章链接列表
【发布时间】：2017-09-20 23:22:53
【问题描述】：

我有简单的博主 json 提要

<script type='text/javascript'>
function mycallback(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
  for (var j = 0; j < json.feed.entry[i].link.length; j++) {
    if (json.feed.entry[i].link[j].rel == 'alternate') {
      var postUrl = json.feed.entry[i].link[j].href;
      break;
    }
  }
  var postTitle = json.feed.entry[i].title.$t;
  var item = '<ul><li><a href=' + postUrl + '>' + postTitle + '</a></li></ul>'; 
  document.write(item);
}
}
</script>
<button type="button">Prev</button>
<button type="button">Next</button>
<h2>Recent Post</h2>
<script src='https://techtovillage.blogspot.com/feeds/posts/default?orderby=published&max-results=1000&alt=json-in-script&callback=mycallback'></script>

此代码显示我的总帖子链接列表。如何将所有帖子链接分成5个链接列表并使用下一个上一个按钮访问所有帖子链接

【问题讨论】：

标签： javascript json blogger

【解决方案1】：

一个简单的解决方案是使用 jQuery 分页库，例如 http://flaviusmatis.github.io/simplePagination.js/。它创建了一个分页，甚至设置了样式。如果项目页面不够清晰，在这个问题 (https://stackoverflow.com/a/20896955/1679286) 中会更详细地解释用法。

这是一个迷你演示（它是如何工作的）

var listInfo = {
  itemsOnPage:4,
  items:[]
 };

function mycallback(json) {
  var tableContent = "";

  listInfo.itemsCount = json.feed.entry.length

  for (var i = 0; i < listInfo.itemsCount; i++) {
    var postTitle = json.feed.entry[i].title.$t;
    for (var j = 0; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel === 'alternate') {
        var postUrl = json.feed.entry[i].link[j].href;
        break;
      }
    }
    tableContent += '<tr><td><a href=' + postUrl + '>' + postTitle + '</a></td></tr>'; 
  }
  
  $("#recentPost").html(tableContent);
  listInfo.items = $("#recentPost tr");
  
  console.info(listInfo)
  $("#pagination").pagination({
      items: listInfo.itemsCount,
      itemsOnPage: listInfo.itemsOnPage,
      cssStyle:"light-theme",
      onPageClick: function(pageNumber) {
            var from = listInfo.itemsOnPage * (pageNumber - 1);
            var to = from + listInfo.itemsOnPage;
            listInfo.items.hide()
                 .slice(from, to).show();
        }
  })
  .pagination('selectPage', 1);

}


$.ajax({
    url: "https://techtovillage.blogspot.com/feeds/posts/default?orderby=published&max-results=16&alt=json-in-script",
    jsonp: "callback",
    dataType: "jsonp", 
    success: function( response ) {
        mycallback(response);
    }
});

<link href="https://rawgit.com/flaviusmatis/simplePagination.js/master/simplePagination.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/flaviusmatis/simplePagination.js/master/jquery.simplePagination.js"></script>


<h2>Recent Post</h2>
<table id="recentPost">
</table>
<div id="pagination"></div>

可选： 另一个不是 100% 保存的解决方案，因为帖子的顺序可能会改变，所以不会使用谷歌参考中提到的查询参数 start-index 加载所有帖子https://developers.google.com/gdata/docs/2.0/reference#Queries

创建此链接：
https://techtovillage.blogspot.com/feeds/posts/default?orderby=published&max-results=5&start-index=1&alt=json-in-script&callback=mycallback
并调整代码以更改为仅加载当前帖子，使用 Ajax 调用（jQuery JSONP 左右），以便 start-index 增加/减少 5，具体取决于单击的按钮/链接

【讨论】：