良好的jQuery分页插件，可用于JSON数据 [英] Good jQuery pagination plugin to use with JSON data
问题描述
我正在寻找一个很好的jQuery分页插件以在我的aspx页面中使用.
I am looking for a good jQuery pagination plugin to use in my aspx page.
我有以下参数.
currentpage, pagesize, TotalRecords, NumberofPages.我希望我的插件能够执行与Stack Overflow分页相同的操作.
I have the following parameters.
currentpage, pagesize, TotalRecords, NumberofPages. I would like my plugin to do the same as Stack Overflow paging.
它应该通过JSON数据进行分页.
It should paginate through JSON data.
与此类似，
我使用JSON数据并使用jQuery进行迭代
I use my JSON data and iterating with jQuery
var jsonObj = jQuery.parseJSON(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');
}
我的页面中有25个div.结果，如何显示1页中的前五个div，依此类推?
There are 25 divs in my page. As a result, how do I show the first five divs in page 1 and so on?
我的HfJsonValue包含以下json数据
My HfJsonValue contains the following json data
{
"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"
}]
}
查看与该问题重复的其他答案:
推荐答案
重复的问题，重复的答案...
Duplicate question, duplicate anwser...
您可以使用jQuery Pagination插件:
You can use the jQuery Pagination plugin:
http://d-scribe.de/webtools/jquery- pagination/demo/demo_options.htm
(在此处下载)
这是使用插件的一种方法(几种).
Here is one way (of several different) how you can use the plugin.
步骤1:从JSON数据生成标记，如下所示:
Step 1: Generate markup from your JSON-data like the following:
<div id="display">
<!-- This is the div where the visible page will be displayed -->
</div>
<div id="hiddenData">
<!-- This is the div where you output your records -->
<div class="record">
<!-- create one record-div for each record you have in your JSON data -->
</div>
<div class="record">
</div>
</div>
该想法是在单击页面链接时将相应记录复制到显示div.因此，该插件提供了pageSelect-callback函数. 第2步将实现此功能，例如:
The idea is to copy the respective record to the display div when clicking on a page-link. Therefore, the plugin offers a pageSelect-callback function. Step 2 is to implement this function, for instance:
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;
}
这意味着每个记录有一页.如果要在每页显示多个记录，则必须相应地修改上述功能.
This would mean that you have one page per record. If you want to display multiple records per page, you have to modify the above function accordingly.
第三步也是最后一步是正确初始化整个事情.
The third and final step is to initialize the whole thing correctly.
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函数即可.
So, you just have to generate the HTML markup from your JSON data and call the init-function afterwards.
这篇关于良好的jQuery分页插件，可用于JSON数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
