Хороший плагин разбиения на страницы jQuery для использования с данными JSON
Я ищу хороший плагин разбиения на страницы jQuery для использования на моей aspx странице.
У меня есть следующие параметры. currentpage, pagesize, TotalRecords, NumberofPages. Я хотел бы, чтобы мой плагин сделал то же как подкачку страниц Переполнения стека.
Править: Это должно нумеровать страницы через данные JSON.
Подобный этому,
Я использую свои данные 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 отделений. В результате, как я показываю первые пять отделений на странице 1 и так далее?
Мой 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"
}]
}
См. дополнительные ответы на дубликат этого вопроса:
1 ответ
Повторяющийся вопрос, дублирующий ответ ...
Вы можете использовать плагин jQuery Pagination:
http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm
( Загрузите его здесь )
Вот один из способов (из нескольких) использования плагина.
Шаг 1: Сгенерируйте разметку из ваших JSON-данных, как показано ниже:
<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. Шаг 2 - реализовать эту функцию, например:
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 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!
});
}
Итак, вам просто нужно сгенерировать разметку HTML из ваших данных JSON и после этого вызвать функцию инициализации.