用于 JSON 数据的优秀 jQuery 分页插件 [英] Good jQuery pagination plugin to use with JSON data
本文介绍了用于 JSON 数据的优秀 jQuery 分页插件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在寻找一个很好的 jQuery 分页插件来在我的 aspx 页面中使用.
我有以下参数.当前页面、页面大小、总记录数、页数.我希望我的插件与 Stack Overflow 分页一样.
它应该通过 JSON 数据进行分页.
与此类似，
我使用我的 JSON 数据并使用 jQuery 进行迭代
var jsonObj = jQuery.parseJSON(HfJsonValue);for (var i = jsonObj.Table.length - 1; i >= 0; i--) {var 员工 = jsonObj.Table[i];$('<div class="resultsdiv"><br/><span class="resultName">' + employee.Emp_Name + '</span><span class="resultfields" 样式="padding-left:100px;">类别 :</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;">地址 :</span><span class="resultfieldvalues">' + employee.Address + '</span></div>').insertAfter('#ResultsDiv');}我的页面中有 25 个 div.因此，如何在页面 1 等中显示前五个 div?
我的HfJsonValue包含以下json数据
<代码>{桌子": [{"Emp_Id": "3","Identity_No": "","Emp_Name": "杰罗姆","地址": "马杜赖",出生日期": ""，"Desig_Name": "主管","Desig_Description": "施工监理","SalaryBasis": "每月",固定工资":25000.00"}, {"Emp_Id": "4","Identity_No": "","Emp_Name": "莫罕","地址": "马杜赖",出生日期": ""，"Desig_Name": "ACC","Desig_Description": "会计师","SalaryBasis": "每月",固定工资":200.00"}, {"Emp_Id": "5","Identity_No": "","Emp_Name": "Murugan","地址": "马杜赖",出生日期": ""，"Desig_Name": "梅森","Desig_Description": "梅森","SalaryBasis": "每周","FixedSalary": "150.00"}, {"Emp_Id": "6","Identity_No": "","Emp_Name": "Ram","地址": "马杜赖",出生日期": ""，"Desig_Name": "梅森","Desig_Description": "梅森","SalaryBasis": "每周","FixedSalary": "120.00"}, {"Emp_Id": "7","Identity_No": "","Emp_Name": "王公","地址": "马杜赖",出生日期": ""，"Desig_Name": "梅森","Desig_Description": "梅森","SalaryBasis": "每周","FixedSalary": "135.00"}, {"Emp_Id": "8","Identity_No": "","Emp_Name": "拉贾库马尔","地址": "马杜赖",出生日期": ""，"Desig_Name": "梅森助手","Desig_Description": "梅森助手","SalaryBasis": "每周","FixedSalary": "105.00"}, {"Emp_Id": "9","Identity_No": "","Emp_Name": "拉克希米","地址": "马杜赖",出生日期": ""，"Desig_Name": "梅森助手","Desig_Description": "梅森助手","SalaryBasis": "每周","FixedSalary": "100.00"}, {"Emp_Id": "10","Identity_No": "","Emp_Name": "帕拉尼","地址": "马杜赖",出生日期": ""，"Desig_Name": "木匠","Desig_Description": "木匠","SalaryBasis": "每周",固定工资":200.00"}, {"Emp_Id": "11","Identity_No": "","Emp_Name": "Annamalai","地址": "马杜赖",出生日期": ""，"Desig_Name": "木匠","Desig_Description": "木匠","SalaryBasis": "每周","FixedSalary": "220.00"}, {"Emp_Id": "12","Identity_No": "","Emp_Name": "大卫","地址": "马杜赖",出生日期": ""，"Desig_Name": "钢固定器","Desig_Description": "钢固定器","SalaryBasis": "每周","FixedSalary": "220.00"}, {"Emp_Id": "13","Identity_No": "","Emp_Name": "Chandru","地址": "马杜赖",出生日期": ""，"Desig_Name": "钢固定器","Desig_Description": "钢固定器","SalaryBasis": "每周","FixedSalary": "220.00"}, {"Emp_Id": "14","Identity_No": "","Emp_Name": "玛尼","地址": "马杜赖",出生日期": ""，"Desig_Name": "钢铁帮手","Desig_Description": "钢铁帮手","SalaryBasis": "每周","FixedSalary": "175.00"}, {"Emp_Id": "15","Identity_No": "","Emp_Name": "卡西克","地址": "马杜赖",出生日期": ""，"Desig_Name": "木材固定剂","Desig_Description": "木材固定剂","SalaryBasis": "每周","FixedSalary": "195.00"}, {"Emp_Id": "16","Identity_No": "","Emp_Name": "巴拉","地址": "马杜赖",出生日期": ""，"Desig_Name": "木材固定剂","Desig_Description": "木材固定剂","SalaryBasis": "每周","FixedSalary": "185.00"}, {"Emp_Id": "17","Identity_No": "","Emp_Name": "泰米尔语","地址": "马杜赖",出生日期": ""，"Desig_Name": "木工助手","Desig_Description": "木工助手","SalaryBasis": "每周","FixedSalary": "185.00"}, {"Emp_Id": "18","Identity_No": "","Emp_Name": "Perumal","地址": "马杜赖",出生日期": ""，"Desig_Name": "厨师","Desig_Description": "做饭","SalaryBasis": "每周","FixedSalary": "105.00"}, {"Emp_Id": "19","Identity_No": "","Emp_Name": "Andiappan","地址": "马杜赖",出生日期": ""，"Desig_Name": "守望者","Desig_Description": "守望者","SalaryBasis": "每周","FixedSalary": "150.00"}]}<块引用>
查看与此问题重复的其他答案:
解决方案
重复问题，重复回答...
您可以使用 jQuery 分页插件:
http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm
(在这里下载)
<小时>这是使用插件的一种方式(几种不同的方式).
第 1 步:根据您的 JSON 数据生成如下标记:
<!-- 这是将显示可见页面的 div --><div id="隐藏数据"><!-- 这是您输出记录的 div --><div class="record"><!-- 为 JSON 数据中的每条记录创建一个记录 div -->
<div class="record">
这个想法是在单击页面链接时将相应的记录复制到显示 div.因此，该插件提供了一个 pageSelect 回调函数.第2步就是实现这个功能，例如:
function pageselectCallback(pageIndex, jq) {//克隆应该显示的记录var newContent = $('#hiddenData div.record:eq('+pageIndex+')').clone();//更新显示容器$('#display').empty().append(newContent);返回假；}这意味着每条记录只有一页.如果要每页显示多条记录，则需要相应修改上述函数.
第三步也是最后一步是正确初始化整个事情.
function initPagination() {//隐藏记录...它们不应该被显示$("#hiddenData").css("display", "none");//获取记录数var numEntries = $('#hiddenData div.result').length;//创建分页元素$("#pagination").pagination(numEntries, {num_edge_entries: 2,num_display_entries: 8,//显示的页面链接数回调:页面选择回调，items_per_page: 1//如果你改变回调，调整这个值！});}因此，您只需从 JSON 数据生成 HTML 标记，然后调用 init 函数即可.
I am looking for a good jQuery pagination plugin to use in my aspx page.
I have the following parameters.
currentpage, pagesize, TotalRecords, NumberofPages. I would like my plugin to do the same as Stack Overflow paging.
EDIT: It should paginate through JSON data.
Similar to this,
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');
}
There are 25 divs in my page. As a result, how do I show the first five divs in page 1 and so on?
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"
}]
}
See additional answers to duplicate of this question:
解决方案
Duplicate question, duplicate anwser...
You can use the jQuery Pagination plugin:
http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm
(Download it here)
Here is one way (of several different) how you can use the plugin.
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>
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!
});
}
So, you just have to generate the HTML markup from your JSON data and call the init-function afterwards.
这篇关于用于 JSON 数据的优秀 jQuery 分页插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
