Как использовать jQuery для разбивки на страницы данных JSON? - PullRequest
Новая
       71

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

7 голосов
/ 24 марта 2010

Дубликат:

Хороший плагин jquery для разбивки на страницы для использования с json Data…

Мои данные 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?

EDIT:

альтернативный текст 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];
        $('<div class="resultsdiv"><br /><span class="resultName">' + employee.Emp_Name + '</span><span class="resultfields" style="padding-left:100px;">Category&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" class="resultfields">Salary Basis&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.SalaryBasis + '</span><span class="resultfields" style="padding-left:25px;">Salary&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.FixedSalary + '</span><span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.Address + '</span></div>').insertAfter('#ResultsDiv');
    }

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

Ответы [ 5 ]

6 голосов
/ 24 марта 2010

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

4 голосов
/ 24 марта 2010

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

2 голосов
/ 12 января 2017

Простой способ демонстрации пагинации JQuery JSON https://jsfiddle.net/rijo/0kjow220/

HTML-код 

<div style="width:400px">
<table class="paginated">
    <thead>
        <tr>
            <th class="col">Play Id</th>
            <th class="col">Question1</th>  
       </tr>
  </thead>
  <tbody id="myTable">
 </tbody>

</table>
<span id="nextValue">next</span><br><span id="PreeValue">Pre</span>
</div>

Код сценария 

 $(document).ready(function(){
      var table =  $('#myTable');
var b = [{"play_id":"1","question1":"135","q1r":"1","question2":"138","q2r":"1","question3":"","q3r":"0","question4":"","q4r":"0","total_point":"6","amount":"1.7","bet_amount":"10","winning_amount":"20","no_of_players":"10"},....]
    var max_size=b.length;
     var sta = 0;
     var elements_per_page = 4;
     var limit = elements_per_page;
     goFun(sta,limit);
     function goFun(sta,limit) {
      for (var i =sta ; i < limit; i++) {

        var $nr = $('<tr><td>A-' + b[i]['play_id'] + '</td><td>B-' + b[i]['question1']  + '</td></tr>');
        table.append($nr);
      }
      }
      $('#nextValue').click(function(){

        var next = limit;
        if(max_size>=next) {
        limit = limit+elements_per_page;
        table.empty();
        console.log(next +' -next- '+limit);
        goFun(next,limit);
        }
      });
      $('#PreeValue').click(function(){
        var pre = limit-(2*elements_per_page);
        if(pre>=0) {
        limit = limit-elements_per_page;
        console.log(pre +' -pre- '+limit);
        table.empty();
        goFun(pre,limit); 
        }
      });

    });
0 голосов
/ 24 марта 2010

Если jsonObject является объектом JSON, то 

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

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

0 голосов
/ 24 марта 2010

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

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

...