如何使用jQuery分页JSON数据？
重复：
与json Data一起使用的好的jquery分页插件…
我的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" }] } 此JSON数据中有22条记录。 如何使用jQuery将此JSON数据分页为每页5个？
编辑：
alt text http://img218.imageshack.us/img218/7757/fivej.jpg
上面的图片是我使用jQuery迭代的员工列表的摘要视图。
var jsonObj = JSON.parse(HfJsonValue); for (var i = jsonObj.Table.length - 1; i >= 0; i--) { var employee = jsonObj.Table[i]; $('
' + employee.Emp_Name + 'Category : ' + employee.Desig_Name + '
Salary Basis : ' + employee.SalaryBasis + 'Salary : ' + employee.FixedSalary + 'Address : ' + employee.Address + '').insertAfter('#ResultsDiv'); }
我得到22条记录。 现在它可能会增长。 如何使用jQuery分页对JSON数据进行分页？
您可以使用Array.splice方法从arrays中创建所需大小的组：
// 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);
recordsToShow现在包含要为页面显示的记录数组。 重构page = 1并将其作为参数，并对recPerPage = 5执行相同recPerPage = 5 ，您应该好好去。 您可以使用jQuery.each迭代recordsToShow ，并使用某种模板系统从每条记录创建HTML元素。
您还应该对startRec添加某种检查，以确保起始记录在边界内。 如果不是，则显示页面1，或向用户显示错误消息。
jQgrid是一个很棒的jQuery插件，用于处理表和分页，但它需要一个非常特定格式的json
JQuery JSON分页演示的简单方法https://jsfiddle.net/rijo/0kjow220/
Html代码
Play Id Question1
next
Pre
脚本代码
$(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 = $('A-' + b[i]['play_id'] + ' B-' + b[i]['question1'] + '
如果jsonObject是JSON对象，那么
jsonObject.Table[0], jsonObject.Table[1], ... jsonObject.Table[4]
将成为第一页的对象。 您将对页面执行的操作取决于您的应用程序。
你需要通过“每页5个”来更具体地说明你的意思。 你打算将这些数据呈现给HTML“页面”吗？
如果是这样，您需要将数据拆分为5个组并进行渲染..