comment accéder à la liste des liens post blogueur suivant préc

Question

J'ai simples flux JSON blogueur

<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> 

Ce code manifesterai ma liste totale de lien de poste. comment diviser tous les liens de poste en 5 liste de liens et accéder tous post lien avec le prochain bouton prev

Answer 1

Une solution simple serait d'utiliser une bibliothèque de pagination jQuery, comme celle-ci http://flaviusmatis.github.io/simplePagination.js/ par exemple. Cela crée une pagination et même le stylise. Dans cette question (https://stackoverflow.com/a/20896955/1679286), l'utilisation est expliquée un peu plus en détail, si la page du projet n'est pas assez claire.

Voici une mini démonstration (comment il pourrait travailler)

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>

En option: Une autre solution qui n'est pas 100% d'économie, puisque l'ordre du poste pourrait changer, ne serait pas le chargement de tous les messages en utilisant le paramètre de requête start-index mentionné dans le google Références https://developers.google.com/gdata/docs/2.0/reference#Queries

Créer ce lien:
https://techtovillage.blogspot.com/feeds/posts/default?orderby=published&max-results=5&start-index=1&alt=json-in-script&callback=mycallback
et le réglage du code pour changer charger uniquement les postes actuels, avec l'Ajax appelle (jQuery JSONP environ), de sorte que le start-index est incrémentée/décrémentée par 5 selon le bouton/lien sur lequel vous avez cliqué