如何使用 jQuery 对 JSON 数据进行分页？
Posted
技术标签:
【中文标题】如何使用 jQuery 对 JSON 数据进行分页？【英文标题】：How to use jQuery to paginate JSON data? 【发布时间】：2011-01-31 06:13:32 【问题描述】：重复：
Good jquery pagination plugin to use with json Data…
我的 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];
$('<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');
我有 22 条记录。现在它可能会增长。如何使用 jQuery 分页对 JSON 数据进行分页？
【问题讨论】：
***.com/questions/2505435/…的可能重复 这里有一个很好的教程：www.youtube.com/phpapplied “重复”块中的第一个链接不可用，我认为应该删除它。 【参考方案1】：JQuery JSON 分页演示的简单方法https://jsfiddle.net/rijo/0kjow220/
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>
脚本代码
$(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);
);
);
【讨论】：
我使用了你的代码，它非常有用。在我的项目中，我放置了上一个和下一个按钮，当没有数据时，我试图隐藏下一个按钮。如何实施，请建议我。我被困在那里。谢谢你..【参考方案2】：您必须更具体地说明“每页 5 个”的含义。您是否要将这些数据呈现为 HTML“页面”？
如果是这样，您需要将数据分成 5 组并进行渲染..
【讨论】：
【参考方案3】：您可以使用 Array.splice 方法从数组中创建所需大小的组：
// 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 执行相同的操作，您应该可以开始了。您可以使用 jQuery.each 遍历 recordsToShow，并使用某种模板系统从每条记录中创建 HTML 元素。
您还应该向startRec 添加某种检查，以确保起始记录在边界内。如果不是，则显示第 1 页，或向用户显示错误消息。
【讨论】：
【参考方案4】：jQgrid 是一个很棒的 jQuery 插件，用于处理表格和分页，但是它需要非常特定格式的 json
【讨论】：
【参考方案5】：如果jsonObject是JSON对象，那么
jsonObject.Table[0], jsonObject.Table[1], ... jsonObject.Table[4]
将是第一页的对象。您将如何处理这些页面取决于您的应用程序。
【讨论】：
@kgiannakakis ***.com/questions/2521372/…以上是关于如何使用 jQuery 对 JSON 数据进行分页？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Laravel 和 jQuery 对查询结果进行分页
如何使用 jQuery 和 Django 分页附加数据页面？