我有一个包含大量记录的JSON结果。我想显示第一个,但有一个下一个按钮来查看第二个,依此类推。我不希望页面刷新,这就是为什么我希望JavaScript,jQuery甚至第三方AJAX库的组合可以提供帮助。
有什么建议吗?
答案 0 :(得分:4)
希望这会有所帮助:
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);
};
答案 1 :(得分:2)
我使用jqgrid就是为了这个目的。像魅力一样。
答案 2 :(得分:1)
我会亲自将json数据加载到全局变量中并以这种方式进行分页。希望你不介意我对调查数据背景的假设我想我从昨天开始记得你。
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');
});
});
~UnTested
我必须承认@sktrdie为处理调查创建整个插件的方法会很好。 IMO这种方法确实是阻力最小的解决方案。