[英]how to access blogger post link list with next prev
我有簡單的Blogger JSON Feed
<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個鏈接列表,並使用下一個上一個按鈕訪問所有發布鏈接
一種簡單的解決方案是使用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%保存的解決方案,因為帖子的順序可能會更改,因此不會使用Google參考https://developers.google.com/gdata/docs中提到的查詢參數start-index
加載所有帖子/2.0/reference#查詢
創建此鏈接:
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
根據單擊的Button / Link遞增/遞減5。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.