logo标签列表

如何使用jQuery对JSON数据进行分页？

jqueryjsonpagination
9

重复：

用于与json数据一起使用的好的jquery分页插件...

我的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将其分页为每页5条？
编辑：上面的图片是使用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数据进行分页？

可能是https://dev59.com/ZkzSa4cB1Zd3GeqPpMLv的重复问题。 - Randolpho
这里有一个很好的教程：www.youtube.com/phpapplied - Norse
1
“duplicate”块中的第一个链接无法访问，我认为应该将其删除。 - raeno
5个回答
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页或向用户显示错误消息。

4

jQgrid 是一个非常好用的 jQuery 插件，可用于处理表格和分页。然而，它需要特定格式的 JSON 数据。

4

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

    });
我使用了你的代码，非常有用。在我的项目中，我添加了上一个和下一个按钮，我试图在没有数据时隐藏下一个按钮。请给我建议，如何实现这个功能。我卡在那里了。谢谢。 - Raikumar Khangembam
0
如果 jsonObject 是 JSON 对象，则
jsonObject.Table[0], jsonObject.Table[1], ... jsonObject.Table[4]

将是第一页的对象。您将根据应用程序对页面执行的操作而定。

@kgiannakakis http://stackoverflow.com/questions/2521372/paging-through-recordsjson-data-using-jquery - ACP
0

你需要更具体地说明你所说的“每页5个”的含义。你是要将这些数据呈现为HTML“页面”吗？

如果是这样，你需要将数据分成每组5个并进行呈现。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接