David David - 6 months ago 22
Javascript Question

How to toggle back table to where it only shows 4 rows - jQuery

I have a table set up to where it only shows 8 rows, and when a user clicks on a icon, it shows ALL the rows in a table.

What I am having trouble figuring out is how to toggle it back to its previous state to where it only shows 8 rows when the table is already toggled



$("#last-game-table > tbody > tr").hide().slice(0, 8).show();
$("#show-all").on("click", function() {
$("tbody > tr", $(this).prev()).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="last-game-table">
<thead>
<tr>
<th>Gamertag</th>
<th>Total Kills</th>
<th>Total Deaths</th>
</tr>
</thead>
<tbody>
@foreach($lastWarzoneGameResults as $last)
<tr>
<td style="background-color: #36c; color: white;">{{ $last['gamertag'] }}</td>
<td style="background-color: #36c; color: white;">{{ $last['totalKills'] }}</td>
<td style="background-color: #36c; color: white;">{{ $last['totalDeaths'] }}</td>
</tr>
@endforeach
</tbody>
</table>
<div id="show-all" class="text-center">
<a href="#!">
<i class="fa fa-arrow-circle-o-down fa-2x" aria-hidden="true"></i>
</a>
</div>




Answer

I prefer to use classes, toggle them as needed and define the display stuff in CSS.

That gives you a lot more control over the process including the fact that you still have all your style definitions in CSS and not splattered all over your javascript.

Granted, your javascript in this case is 4 lines of code, but I'd still recommend using classes since every project can grow

Here's how your solution would like using my approach (notice how I managed to add an extra gimmick without any additional javascript):

$("#last-game-table > tbody > tr").addClass('toggle').slice(0, 4).removeClass('toggle');
$("#show-all").on("click", function() {
  $('#last-game-table').toggleClass('show-all');
});
#last-game-table > tbody > tr.toggle {
  display: none;
}
#last-game-table.show-all > tbody > tr {
  display: table-row;
}
#show-all i.fa {
  transition: transform .5s;
}
.show-all + #show-all i.fa {
  transform: rotate(180deg);
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="last-game-table">
  <thead>
    <tr>
      <th>Gamertag</th>
      <th>Total Kills</th>
      <th>Total Deaths</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="background-color: #36c; color: white;">test 1</td>
      <td style="background-color: #36c; color: white;">foo 1</td>
      <td style="background-color: #36c; color: white;">bar 1</td>
    </tr>
    <tr>
      <td style="background-color: #36c; color: white;">test 2</td>
      <td style="background-color: #36c; color: white;">foo 2</td>
      <td style="background-color: #36c; color: white;">bar 2</td>
    </tr>
    <tr>
      <td style="background-color: #36c; color: white;">test 3</td>
      <td style="background-color: #36c; color: white;">foo 3</td>
      <td style="background-color: #36c; color: white;">bar 3</td>
    </tr>
    <tr>
      <td style="background-color: #36c; color: white;">test 4</td>
      <td style="background-color: #36c; color: white;">foo 4</td>
      <td style="background-color: #36c; color: white;">bar 4</td>
    </tr>
    <tr>
      <td style="background-color: #36c; color: white;">test 5</td>
      <td style="background-color: #36c; color: white;">foo 5</td>
      <td style="background-color: #36c; color: white;">bar 5</td>
    </tr>
  </tbody>
</table>
<div id="show-all" class="text-center">
  <a href="#!">
    <i class="fa fa-arrow-circle-o-down fa-2x" aria-hidden="true"></i>
  </a>
</div>

Comments