我正在尝试根据某些开始和结束索引显示json数组。我确实显示了所有内容,但是当我单击第一个按钮时,它不起作用。这是我的代码..单击第一个按钮后,它说"this.data is undefined"任何帮助??
function GridLibrary(data) {
this.data = data;
}
GridLibrary.prototype.display = function() {
var html = [];
html.push("<table >n<tbody>");
html.push("<tr>");
for ( var propertyNames in this.data[0]) {
html.push("<th>" + propertyNames + "</th>");
}
html.push("</tr>");
// loop through the array of objects
for (var i = startIndex; i < endIndex; i++) {
item = this.data[i];
html.push("<tr>");
for ( var key in item) {
html.push("<td>" + item[key] + "</td>");
}
html.push("</tr>");
}
html.push("<table>n</tbody>");
$('body').append(html.join(""));
};
var grid = new GridLibrary();
$("#first").click(function() {
//size = parseInt(document.getElementById("listsize").value, 10);
startIndex = 3;
endIndex = 6;
grid.display();
});
网格.jsp
<script type="text/javascript">
var json = [ {
"id" : 1,
"name" : "name1",
"age" : 10,
"feedback" : "feedback1"
}, {
"id" : 2,
"name" : "name2",
"age" : 90,
"feedback" : "feedback2"
}, {
"id" : 3,
"name" : "name3",
"age" : 30,
"feedback" : "feedback3"
}, {
"id" : 4,
"name" : "name4",
"age" : 50,
"feedback" : "feedback4"
}, {
"id" : 5,
"name" : "name5",
"age" : 55,
"feedback" : "feedback5"
}, {
"id" : 6,
"name" : "name6",
"age" : 68,
"feedback" : "feedback6"
}, {
"id" : 7,
"name" : "name7",
"age" : 57,
"feedback" : "feedback7"
}, {
"id" : 8,
"name" : "name8",
"age" : 89,
"feedback" : "feedback8"
}, {
"id" : 9,
"name" : "name9",
"age" : 65,
"feedback" : "feedback9"
}, {
"id" : 10,
"name" : "name10",
"age" : 54,
"feedback" : "feedback10"
}, {
"id" : 11,
"name" : "name11",
"age" : 51,
"feedback" : "feedback11"
}, {
"id" : 12,
"name" : "name12",
"age" : 97,
"feedback" : "feedback12"
} ];
new GridLibrary(json).display();
</script>
我在这里做了一些假设。
1) 你的构造函数应该接受一个参数,该参数将是你的数据:
function GridLibrary(data){
this.data = data;
return this;
}
2)这将像这样使用:
var grid = new GridLibrary(json);
3)然后,您应该将startIndex
和endIndex
作为参数传递给display()
:
grid.display(0, 11);
或
grid.display(3, 6);
并更改方法以接受这些参数:
GridLibrary.prototype.display = function(startIndex, endIndex) {...
4)最后,您应该将HTML(不附加)更改为特定div
否则您将覆盖first
按钮:
$('#body').html(html.join(""));
演示
仅通过查看您的代码,似乎您没有正确关闭表标记。最后一个html.push添加了一个新的<table>
,而不是</table>
。它们的顺序也错误,应该</tbody></table>
编辑:固定格式