1. 技术文章
  2. How to use jQuery to paginate JSON data?

How to use jQuery to paginate JSON data?

由 只谈情不闲聊 提交于 2019-11-28 09:24:47

You can use the Array.splice-method to create groups of the size you want from the array:

// 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 now contains an array of records to show for a page. Refactor out page = 1 and take it as a parameter, and do the same for recPerPage = 5, and you should be good to go. You can use jQuery.each to iterate through recordsToShow, and use some kind of templating system to create HTML-elements from each record.

You should also add some kind of check to startRec to ensure that the starting record is within boundaries. If it is not, then either display page 1, or display an error message to the user.

jQgrid is a great jQuery plugin for handling tables and paging, it requires json in a very specific format however

Simple way for JQuery JSON pagination demo https://jsfiddle.net/rijo/0kjow220/

Html code 

<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>

Script code 

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

    });

If jsonObject is the JSON object, then

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

will be the objects of the first page. What you will do with the pages depends on your application.

mkoryak

You have to be more specific about what you mean by "5 per page". Are you going to be rendering this data to HTML "pages"?

If so, you need to split the data into groups of 5 and render it..

标签
jquery
json
pagination
paginate
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!