如何与下一个先前

访问博客帖子链接名单上有简单的Blogger 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个链接列表，并访问所有帖子链接与下一个prev按钮

来源

2017-09-14 Rajendra

一个简单的解决方案是使用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取决于点击的按钮/链接

来源

2017-09-20 14:04:05

如何与下一个先前

回答

相关问题