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

Question

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

cMarius · Accepted Answer · 2021-05-05 20:16:15Z

1

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>

edited May 5, 2021 at 20:16

answered Apr 26, 2021 at 11:57

cMarius

1,1322 gold badges13 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

cMarius Over a year ago

Sorry, I'm not sure I follow, what do you mean by dropdown menu? You would need an event to sometimes load an additional 10 products, right? How would the user trigger that event?

cvz Over a year ago

I mean can we add a div/section for each 10 rows and display only those 10 rows when clicked on the div (just like how a dropdown menu works), and by default all the rows must be hidden

cMarius Over a year ago

hmmm, we can try to replace $('#table').append(udata); with $('#table').html(udata);, and the way we get our row index. I've adjusted my answer to include 2 global vars startIndex and endIndex, and instead of getting the clicked tr index, we save our indexes in js vars.

cMarius Over a year ago

I've added a new function that builds the select element based on the users variable, then changed the listener to work based on change events from the select. The startIndex and endIndex are added as data attributes on the options. Check my updated answer and let me know if it helps.

cMarius Over a year ago

I've edited my snippet to fetch the users data from an external source, as per your example, but if it works or not mostly depends on the response. As for pagination, that is a little more complicated and outside the scope of this question, try asking a new one or check out this resource for inspiration: stackoverflow.com/questions/19605078/…

|

Collectives™ on Stack Overflow

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

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related