如何與下一個先前

訪問博客帖子鏈接名單上有簡單的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

如何與下一個先前

回答

相關問題