如何使用 jQuery 对 JSON 数据进行分页？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2507844/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use jQuery to paginate JSON data?
提问by ACP
Duplicate:
复制：
My JSON data looks like this
我的 JSON 数据如下所示
{
"Table": [{
"Emp_Id": "3",
"Identity_No": "",
"Emp_Name": "Jerome",
"Address": "Madurai",
"Date_Of_Birth": "",
"Desig_Name": "Supervisior",
"Desig_Description": "Supervisior of the Construction",
"SalaryBasis": "Monthly",
"FixedSalary": "25000.00"
}, {
"Emp_Id": "4",
"Identity_No": "",
"Emp_Name": "Mohan",
"Address": "Madurai",
"Date_Of_Birth": "",
"Desig_Name": "Acc ",
"Desig_Description": "Accountant",
"SalaryBasis": "Monthly",
"FixedSalary": "200.00"
}, {
"Emp_Id": "5",
"Identity_No": "",
"Emp_Name": "Murugan",
"Address": "Madurai",
"Date_Of_Birth": "",
"Desig_Name": "Mason",
"Desig_Description": "Mason",
"SalaryBasis": "Weekly",
"FixedSalary": "150.00"
}, {
"Emp_Id": "6",
"Identity_No": "",
"Emp_Name": "Ram",
"Address": "Madurai",
"Date_Of_Birth": "",
"Desig_Name": "Mason",
"Desig_Description": "Mason",
"SalaryBasis": "Weekly",
"FixedSalary": "120.00"
}, {
"Emp_Id": "7",
"Identity_No": "",
"Emp_Name": "Raja",
"Address": "Madurai",
"Date_Of_Birth": "",
"Desig_Name": "Mason",
"Desig_Description": "Mason",
"SalaryBasis": "Weekly",
"FixedSalary": "135.00"
}, {
"Emp_Id": "8",
"Identity_No": "",
"Emp_Name": "Raja kumar",
"Address": "Madurai",
"Date_Of_Birth": "",
"Desig_Name": "Mason Helper",
"Desig_Description": "Mason Helper",
"SalaryBasis": "Weekly",
"FixedSalary": "105.00"
}, {
"Emp_Id": "9",
"Identity_No": "",
"Emp_Name": "Lakshmi",
"Address": "Madurai",
"Date_Of_Birth": "",
"Desig_Name": "Mason Helper",
"Desig_Description": "Mason Helper",
"SalaryBasis": "Weekly",
"FixedSalary": "100.00"
}, {
"Emp_Id": "10",
"Identity_No": "",
"Emp_Name": "Palani",
"Address": "Madurai",
"Date_Of_Birth": "",
"Desig_Name": "Carpenter",
"Desig_Description": "Carpenter",
"SalaryBasis": "Weekly",
"FixedSalary": "200.00"
}, {
"Emp_Id": "11",
"Identity_No": "",
"Emp_Name": "Annamalai",
"Address": "Madurai",
"Date_Of_Birth": "",
"Desig_Name": "Carpenter",
"Desig_Description": "Carpenter",
"SalaryBasis": "Weekly",
"FixedSalary": "220.00"
}, {
"Emp_Id": "12",
"Identity_No": "",
"Emp_Name": "David",
"Address": "Madurai",
"Date_Of_Birth": "",
"Desig_Name": "Steel Fixer",
"Desig_Description": "Steel Fixer",
"SalaryBasis": "Weekly",
"FixedSalary": "220.00"
}, {
"Emp_Id": "13",
"Identity_No": "",
"Emp_Name": "Chandru",
"Address": "Madurai",
"Date_Of_Birth": "",
"Desig_Name": "Steel Fixer",
"Desig_Description": "Steel Fixer",
"SalaryBasis": "Weekly",
"FixedSalary": "220.00"
}, {
"Emp_Id": "14",
"Identity_No": "",
"Emp_Name": "Mani",
"Address": "Madurai",
"Date_Of_Birth": "",
"Desig_Name": "Steel Helper",
"Desig_Description": "Steel Helper",
"SalaryBasis": "Weekly",
"FixedSalary": "175.00"
}, {
"Emp_Id": "15",
"Identity_No": "",
"Emp_Name": "Karthik",
"Address": "Madurai",
"Date_Of_Birth": "",
"Desig_Name": "Wood Fixer",
"Desig_Description": "Wood Fixer",
"SalaryBasis": "Weekly",
"FixedSalary": "195.00"
}, {
"Emp_Id": "16",
"Identity_No": "",
"Emp_Name": "Bala",
"Address": "Madurai",
"Date_Of_Birth": "",
"Desig_Name": "Wood Fixer",
"Desig_Description": "Wood Fixer",
"SalaryBasis": "Weekly",
"FixedSalary": "185.00"
}, {
"Emp_Id": "17",
"Identity_No": "",
"Emp_Name": "Tamil arasi",
"Address": "Madurai",
"Date_Of_Birth": "",
"Desig_Name": "Wood Helper",
"Desig_Description": "Wood Helper",
"SalaryBasis": "Weekly",
"FixedSalary": "185.00"
}, {
"Emp_Id": "18",
"Identity_No": "",
"Emp_Name": "Perumal",
"Address": "Madurai",
"Date_Of_Birth": "",
"Desig_Name": "Cook",
"Desig_Description": "Cook",
"SalaryBasis": "Weekly",
"FixedSalary": "105.00"
}, {
"Emp_Id": "19",
"Identity_No": "",
"Emp_Name": "Andiappan",
"Address": "Madurai",
"Date_Of_Birth": "",
"Desig_Name": "Watchman",
"Desig_Description": "Watchman",
"SalaryBasis": "Weekly",
"FixedSalary": "150.00"
}]
}
There are 22 records in this JSON data. How to paginate this JSON data to 5 per page using jQuery?
此 JSON 数据中有 22 条记录。如何使用 jQuery 将此 JSON 数据分页为每页 5 个？
EDIT:
编辑：
alt text http://img218.imageshack.us/img218/7757/fivej.jpg
替代文字 http://img218.imageshack.us/img218/7757/fivej.jpg
The above image is my summary view of employee list iterated using jQuery.
上图是我使用 jQuery 迭代的员工列表的摘要视图。
var jsonObj = JSON.parse(HfJsonValue);
for (var i = jsonObj.Table.length - 1; i >= 0; i--) {
var employee = jsonObj.Table[i];
$('<div class="resultsdiv"><br /><span class="resultName">' + employee.Emp_Name + '</span><span class="resultfields" style="padding-left:100px;">Category :</span> <span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" class="resultfields">Salary Basis :</span> <span class="resultfieldvalues">' + employee.SalaryBasis + '</span><span class="resultfields" style="padding-left:25px;">Salary :</span> <span class="resultfieldvalues">' + employee.FixedSalary + '</span><span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address :</span> <span class="resultfieldvalues">' + employee.Address + '</span></div>').insertAfter('#ResultsDiv');
}
I get 22 records. Now it may grow. How to paginate the JSON data by using jQuery pagination?
我得到 22 条记录。现在它可能会增长。如何使用 jQuery 分页对 JSON 数据进行分页？
回答by PatrikAkerstrand
You can use the Array.splice-method to create groups of the size you want from the array:
您可以使用 Array.splice-method 从数组中创建所需大小的组：
// Parse json etc.
var json = [...];
// Fetch the data for a page from the json-result object
var page = 1,
recPerPage = 5,
// Use Math.max to ensure that we at least start from record 0
startRec = Math.max(page - 1, 0) * 5,
// The end index of Array.splice doesn't have to be within boundaries,
// But if you want to ensure that it does, then use
// Math.min(startRec + recPerPage, json.table.length)
endRec = startRec + recPerPage
recordsToShow = json.table.splice(startRec, endRec);
recordsToShownow contains an array of records to show for a page. Refactor out page = 1and take it as a parameter, and do the same for recPerPage = 5, and you should be good to go. You can use jQuery.each to iterate through recordsToShow, and use some kind of templating system to create HTML-elements from each record.
recordsToShow现在包含要为页面显示的记录数组。重构page = 1并把它作为一个参数，对 做同样的事情recPerPage = 5，你应该很高兴。您可以使用 jQuery.each 遍历recordsToShow，并使用某种模板系统从每个记录创建 HTML 元素。
You should also add some kind of check to startRecto ensure that the starting record is within boundaries. If it is not, then either display page 1, or display an error message to the user.
您还应该添加某种检查startRec以确保起始记录在边界内。如果不是，则显示第 1 页，或向用户显示错误消息。
回答by Rigobert Song
回答by Rijo
Simple way for JQuery JSON pagination demo https://jsfiddle.net/rijo/0kjow220/
JQuery JSON 分页演示的简单方法https://jsfiddle.net/rijo/0kjow220/
Html code
html代码
<div style="width:400px">
<table class="paginated">
<thead>
<tr>
<th class="col">Play Id</th>
<th class="col">Question1</th>
</tr>
</thead>
<tbody id="myTable">
</tbody>
</table>
<span id="nextValue">next</span><br><span id="PreeValue">Pre</span>
</div>
Script code
脚本代码
$(document).ready(function(){
var table = $('#myTable');
var b = [{"play_id":"1","question1":"135","q1r":"1","question2":"138","q2r":"1","question3":"","q3r":"0","question4":"","q4r":"0","total_point":"6","amount":"1.7","bet_amount":"10","winning_amount":"20","no_of_players":"10"},....]
var max_size=b.length;
var sta = 0;
var elements_per_page = 4;
var limit = elements_per_page;
goFun(sta,limit);
function goFun(sta,limit) {
for (var i =sta ; i < limit; i++) {
var $nr = $('<tr><td>A-' + b[i]['play_id'] + '</td><td>B-' + b[i]['question1'] + '</td></tr>');
table.append($nr);
}
}
$('#nextValue').click(function(){
var next = limit;
if(max_size>=next) {
limit = limit+elements_per_page;
table.empty();
console.log(next +' -next- '+limit);
goFun(next,limit);
}
});
$('#PreeValue').click(function(){
var pre = limit-(2*elements_per_page);
if(pre>=0) {
limit = limit-elements_per_page;
console.log(pre +' -pre- '+limit);
table.empty();
goFun(pre,limit);
}
});
});
回答by mkoryak
You have to be more specific about what you mean by "5 per page". Are you going to be rendering this data to HTML "pages"?
您必须更具体地说明“每页 5 个”的含义。您是否要将这些数据呈现为 HTML“页面”？
If so, you need to split the data into groups of 5 and render it..
如果是这样，您需要将数据分成 5 组并进行渲染。
回答by kgiannakakis
If jsonObject is the JSON object, then
如果 jsonObject 是 JSON 对象，则
jsonObject.Table[0], jsonObject.Table[1], ... jsonObject.Table[4]
will be the objects of the first page. What you will do with the pages depends on your application.
将是第一页的对象。您将如何处理这些页面取决于您的应用程序。
