如何与下一个先前
问题描述:
访问博客帖子链接名单上有简单的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按钮
答
一个简单的解决方案是使用jQuery分页库,例如像这样的一个http://flaviusmatis.github.io/simplePagination.js/。它创建一个分页,甚至是它的样式。在这个问题(https://*.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取决于点击的按钮/链接