Pagination via des enregistrements à l'aide de jQuery

Question

J'ai un résultat JSON qui contient de nombreux enregistrements. Je voudrais montrer le premier, mais avoir un bouton suivant pour voir le second, et ainsi de suite. Je ne veux pas que la page se rafraîchisse, c'est pourquoi j'espère qu'une combinaison de JavaScript, de jQuery et même d'une bibliothèque AJAX tierce peut aider.

Des suggestions?

Answer 1

Hope this helps:

var noName = { 
    data: null 
    ,currentIndex : 0 
    ,init: function(data) { 
     this.data = data; 
     this.show(this.data.length - 1); // show last 
    } 
    ,show: function(index) { 
     var jsonObj = this.data[index]; 
     if(!jsonObj) { 
      alert("No more data"); 
      return; 
     } 
     this.currentIndex = index; 
     var title = jsonObj.title; 
     var text = jsonObj.text; 
     var next = $("<a>").attr("href","#").click(this.nextHandler).text("next"); 
     var previous = $("<a>").attr("href","#").click(this.previousHandler).text("previous"); 

     $("body").html("<h2>"+title+"</h2><p>"+text+"</p>"); 
     $("body").append(previous); 
     $("body").append(document.createTextNode(" ")); 
     $("body").append(next); 
    } 
    ,nextHandler: function() { 
     noName.show(noName.currentIndex + 1); 
    } 
    ,previousHandler: function() { 
     noName.show(noName.currentIndex - 1); 
    } 
}; 

window.onload = function() { 
    var data = [ 
     {"title": "Hello there", "text": "Some text"}, 
     {"title": "Another title", "text": "Other"} 
    ]; 
    noName.init(data); 
}; 

Answer 2

J'utilise jqgrid uniquement dans ce but. Fonctionne comme un charme.

http://www.trirand.com/blog/

Answer 3

Personnellement, je charger les données JSON dans une variable globale et la page de cette façon. J'espère que vous ne me dérange pas mes hypothèses sur le contexte des données d'enquête, je pense que je me souviens de vous hier.

var surveyData = "[{prop1: 'value', prop2:'value'},{prop1: 'value', prop2:'value'}]" 
$.curPage = 0; 

$.fn.loadQuestion = function(question) { 
    return this.each(function() { 
     $(this).empty().append(question.prop1); 
     // other appends for other question elements 
    }); 
} 

$(document).ready(function() { 
    $.questions = JSON.parse(surveyData); // from the json2 library json.org 
    $('.questionDiv').loadQuestion($.questions[0]);  

    $('.nextButton').click(funciton(e) { 
     if ($.questions.length >= $.curPage+1) 
      $('.questionDiv').loadQuestion($.questions[$.curPage++]); 
     else 
      $('.questionDiv').empty().append('Finished'); 
    }); 
}); 

~ non testé

Je dois admettre que cette approche de @sktrdie de créer un plugin ensemble pour gérer l'enquête serait bien. OMI cette méthode est vraiment un chemin de moindre résistance.