Как использовать jQuery для нумерации страниц данных JSON?

Дубликат:

Хороший плагин разбиения на страницы 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];
        $('

' + employee.Emp_Name + 'Category : ' + employee.Desig_Name + '

Salary Basis : ' + employee.SalaryBasis + 'Salary : ' + employee.FixedSalary + 'Address : ' + employee.Address + '
').insertAfter('#ResultsDiv'); }

Я получаю 22 записи. Теперь это может вырасти. Как нумеровать страницы данные JSON при помощи разбиения на страницы jQuery?

7
задан Community 23 May 2017 в 12:17
поделиться

4 ответа

Вы можете использовать метод 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, либо отобразите сообщение об ошибке для пользователя.

6
ответ дан 6 December 2019 в 21:12
поделиться

jQgrid - отличный плагин jQuery для обработки таблиц и разбиения на страницы, однако для него требуется json в очень специфическом формате

4
ответ дан 6 December 2019 в 21:12
поделиться

Если jsonObject - это объект JSON, то

jsonObject.Table[0], jsonObject.Table[1], ... jsonObject.Table[4]

это будут объекты первой страницы. Что вы будете делать со страницами, зависит от вашего приложения.

0
ответ дан 6 December 2019 в 21:12
поделиться

Вы должны уточнить, что вы имеете в виду под "5 на страницу". Вы собираетесь выводить эти данные на "страницы" HTML?

Если да, то вам нужно разделить данные на группы по 5 и вывести их...

0
ответ дан 6 December 2019 в 21:12
поделиться
Другие вопросы по тегам:

Похожие вопросы: