用于JSON数据的好jQuery分页插件

我正在寻找一个好的jQuery分页插件，可以在我的aspx页面中使用。

我有以下参数。 currentpage, pagesize, TotalRecords, NumberofPages 。 我希望我的插件与Stack Overflow分页一样。

编辑：它应该通过JSON数据分页。

与此类似，

寻呼机http://img98.imageshack.us/img98/7278/pagersy.jpg

我使用我的JSON数据并使用jQuery进行迭代

 var jsonObj = jQuery.parseJSON(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'); } 

我的页面中有25个div。 因此，如何在第1页中显示前五个div等等？

我的HfJsonValue包含以下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" }] } 

请参阅此问题的副本的其他答案：

如何使用jQuery分页JSON数据？

Answer 1

重复问题，复制anwser …

您可以使用jQuery Pagination插件：

http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm

（ 在这里下载）

---

这是一种方式（几种不同）如何使用插件。

步骤1：从JSON数据生成标记，如下所示：

想法是在单击页面链接时将相应的记录复制到显示div。 因此，该插件提供了pageSelect-callback函数。 第2步是实现此function，例如：

 function pageselectCallback(pageIndex, jq) { // Clone the record that should be displayed var newContent = $('#hiddenData div.record:eq('+pageIndex+')').clone(); // Update the display container $('#display').empty().append(newContent); return false; } 

这意味着每条记录只有一页。 如果要在每页显示多个记录，则必须相应地修改上述function。

第三步也是最后一步是正确初始化整个事情。

 function initPagination() { // Hide the records... they shouldn't be displayed $("#hiddenData").css("display", "none"); // Get the number of records var numEntries = $('#hiddenData div.result').length; // Create pagination element $("#pagination").pagination(numEntries, { num_edge_entries: 2, num_display_entries: 8, // number of page links displayed callback: pageselectCallback, items_per_page: 1 // Adjust this value if you change the callback! }); } 

因此，您只需从JSON数据生成HTML标记，然后调用init函数。