如何使用jQuery分页JSON数据？

时间：2010-03-24 13:07:50

标签： jquery json pagination paginate

  

重复：

     

Good jquery pagination plugin to use with 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条记录。如何使用jQuery将此JSON数据分页为每页5个？

修改

alt text 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条记录。现在它可能会增长。如何使用jQuery分页对JSON数据进行分页？

5 个答案:

答案 0 :(得分：6)

您可以使用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页，或向用户显示错误消息。

答案 1 :(得分：4)

jQgrid是一个很棒的jQuery插件，用于处理表和分页，它需要一个非常特定格式的json但是

答案 2 :(得分：2)

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); 
        }
      });

    });

答案 3 :(得分：0)

您必须更加明确“每页5个”的含义。你打算将这些数据呈现给HTML“页面”吗？

如果是这样，您需要将数据拆分为5个组并进行渲染..

答案 4 :(得分：0)

如果jsonObject是JSON对象，那么

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

将成为第一页的对象。您将对页面执行的操作取决于您的应用程序。

相关问题
最新问题