Дубликат:
Хороший плагин разбиения на страницы jQuery для использования с json Данными …
Мои данные 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 записи. Как нумеровать страницы эти данные JSON к 5 на страницу с помощью jQuery?
Править:
сопроводительный текст 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]; $('
').insertAfter('#ResultsDiv'); }
' + employee.Emp_Name + 'Category : ' + employee.Desig_Name + '
Salary Basis : ' + employee.SalaryBasis + 'Salary : ' + employee.FixedSalary + 'Address : ' + employee.Address + 'Я получаю 22 записи. Теперь это может вырасти. Как нумеровать страницы данные JSON при помощи разбиения на страницы jQuery?
Вы можете использовать метод 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, либо отобразите сообщение об ошибке для пользователя.
jQgrid - отличный плагин jQuery для обработки таблиц и разбиения на страницы, однако для него требуется json в очень специфическом формате
Если jsonObject - это объект JSON, то
jsonObject.Table[0], jsonObject.Table[1], ... jsonObject.Table[4]
это будут объекты первой страницы. Что вы будете делать со страницами, зависит от вашего приложения.
Вы должны уточнить, что вы имеете в виду под "5 на страницу". Вы собираетесь выводить эти данные на "страницы" HTML?
Если да, то вам нужно разделить данные на группы по 5 и вывести их...