How to display particular rows of a table fetched from json data using jquery click function

user_15759193 0
Viewed 154

This code retrieves the JSON data from the external source and displays it inside the table, it has total 50 rows of data, now I need to display the 1-10 rows, 11-20 rows .. until 40-50 rows when clicked on the respective row of the table, I've posted the whole jquery as it's a complex question to understand, any help will be apprecieated, thank you!

<table class="table table-hover" id="table" style="width:100%">
  <tbody>
    <tr>
      <th>ID</th>
      <th>FirstName</th>
      <th>LastName</th>
      <th>Username</th>
      <th>Avatar</th>
      <th>E-mail</th>
      <th>Age</th>
      <th>gender</th>
      <th>maritial status</th>
      <th>address</th>
      <th>Phone</th>
      <th>Website</th>
    </tr>
  </tbody>
</table>

$(document).ready(function() {
  fetch('http://fakeapi.jsonparseronline.com/users')
    .then(res => res.json())
    .then((out) => {
      console.log('Output: ', out);
    }).catch(err => console.error(err));

  $.getJSON('http://fakeapi.jsonparseronline.com/users',
    function(data) {
      var udata = '';

      $.each(data, function(key, value) {
        udata += '<tr>';
        udata += '<td>' + value.id + '</td>';
        udata += '<td>' + ' ' + value.firstName + '</td>';
        udata += '<td>' + ' ' + value.lastName + '</td>';
        udata += '<td>' + ' ' + value.username + '</td>';
        udata += '<td>' + ' ' + value.avatar + '</td>';
        udata += '<td>' + ' ' + value.email + '</td>';
        udata += '<td>' + ' ' + value.age + '</td>';
        udata += '<td>' + ' ' + value.gender + '</td>';
        udata += '<td>' + ' ' + value.maritalStatus + '</td>';
        udata += '<td>' + ' ' + value.address + '</td>';
        udata += '<td>' + ' ' + value.phone + '</td>';
        udata += '<td>' + ' ' + value.website + '</td>';
        udata += '</tr>';
      });
      $('#table').append(udata);

      $("#table tbody tr").click(function() {
        var $row = $(this).closest("tr");
        var $text = $row.find("td").text();
        alert($text);
      });
    });
});
jquery json
1 Answers

One solution is to make the listing snippet into a function that accepts a start and end parameter for which rows to display. Then you just need to figure out how to process those. In my example below, I just added an additional row with the text MORE that the user can press, and I use the row index to figure out what rows to display.

I've also used a local JSON variable since the resource you were fetching was inaccessible.

Edit: Now using a dropdown, removed local var.

$(document).ready(function () {
var users= [];
  
  $.getJSON('http://fakeapi.jsonparseronline.com/users', function(data) {
      users = data;
      buildSelect();
      listUsers(1, 10);
  });
  
  function buildSelect() {
      var sdata = "";
      $.each(users, function (key, value) {
        if (key % 10 === 0) {
          sdata += `<option data-start-index="${key + 1}" data-end-index="${key + 10}">${key + 1} - ${key + 10}</option>`;
        }
      });
      $(".more").html(sdata);
  }
  
  function listUsers(start, end) {
    var udata = "";
    
    $.each(users.slice(start-1, end), function (key, value) {
        udata += "<tr>" +
                     "<td>" + value.id + "</td>" +
                     "<td>" + value.firstName + "</td>" +
                     "<td>" + value.lastName + "</td>" +
                     "<td>" + value.username + "</td>" +
                     "<td>" + value.avatar + "</td>" +
                     "<td>" + value.email + "</td>" +
                     "<td>" + value.age + "</td>" +
                     "<td>" + value.gender + "</td>" +
                     "<td>" + value.maritalStatus + "</td>" +
                     "<td>" + value.address + "</td>" +
                     "<td>" + value.phone + "</td>" +
                     "<td>" + value.website + "</td>" +
                 "</tr>";
    }); 
    $('#table').html(udata);
  }
  
  $(document).on("change",".more",function() {
    listUsers($(":selected", this).attr("data-start-index"), $(":selected", this).attr("data-end-index"));
  });
});
.more {
  background-color: grey;
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="more"></select>
<table class="table table-hover" id="table" style="width:100%"> 
<tbody>
    <tr>
      <th>ID</th>
      <th>FirstName</th>
      <th>LastName</th>
      <th>Username</th>
      <th>Avatar</th>
      <th>E-mail</th>    
      <th>Age</th>
      <th>Gender</th>
      <th>Maritial status</th>
      <th>Address</th>
      <th>Phone</th>
      <th>Website</th>
    </tr>
  </tbody>
</table>

user_33013760
Related