Checkbox Filter HTML Table jQuery

Question

I have a HTML table which I have made that has some document.ready functions already attached to it the table simply sorts data(tr) by class(.amount) on load and also has paging - the paging technique is using existing HTML.

I'd like to now add a checkbox filter using jQuery if possible, What I'd like to do is filter the table when the checkbox is clicked to only show table rows that have a cell with the id:

#free

and obviously contain data no upfront cost.

https://jsfiddle.net/ghzch66e/19/

        <h1>Table sorting on page load with paging</h1>

    <input type="checkbox"> Free Handset

    <table id="internalActivities">
    <thead>
      <tr>
        <th>head1</th><th>head2</th><th>head3</th><th>head4</th>
      </tr>
    </thead>
    <tbody>
    <tr>
    <td>data</td> <td>data</td> <td>data</td> <td><span id="handsetcost">£364.00 upfront</span><br><span class="amount">£10.10 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="free">No upfront cost</span><br><span class="amount">£40.40 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="free">No upfront cost</span><br><span class="amount">£30.30 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="free">No upfront cost</span><br><span class="amount">£16.04 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="handsetcost">£134.00 upfront</span><br><span class="amount">£12.19 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="handsetcost">£120.00 upfront</span><br><span class="amount">£14.22 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="free">No upfront cost</span><br><span class="amount">£50.22 per month</span></td>
    </tr>
    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="free">No upfront cost</span><br><span class="amount">£10.33 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="free">No upfront cost</span><br><span class="amount">£40.45 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="handsetcost">£200.00 upfront</span><br><span class="amount">£30.84 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="free">No upfront cost</span><br><span class="amount">£16.14 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="free">No upfront cost</span><br><span class="amount">£12.10 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="free">No upfront cost</span><br><span class="amount">£14.02 per month</span></td>
    </tr>

    <tr>
        <td>data</td> <td>data</td> <td>data</td> <td><span id="free">No upfront cost</span><br><span class="amount">£50.88 per month</span></td>
    </tr>
    </tbody>
    </table>

    <input type="button" id="seeMoreRecords" value="More">
    <input type="button" id="seeLessRecords" value="Less">

I have made a jsfiddle so you can see exactly what I mean.

Need to share the code in the question not just a fiddle link — Arun P Johny
– Arun P Johny, Commented Apr 7, 2016 at 3:46
ID of an element must be unique... so the free and handsetcost should be classes — Arun P Johny
– Arun P Johny, Commented Apr 7, 2016 at 3:48

Arun P Johny · Accepted Answer · 2016-04-07 04:00:25Z

As already mentioned since ID of an element must be unique, need to use class for free and handset.

Then in the paging logic use that also to filter the rows like

jQuery(document).ready(function($) {
  var dataRows = [];

  //Create an array of all rows with its value (this assumes that the amount is always a number.  You should add error checking!!  Also assumes that all rows are data rows, and that there are no header rows.  Adjust selector appropriately.
  $('#internalActivities > tbody > tr').each(function(i, j) {
    dataRows.push({
      'amount': parseFloat($(this).find('.amount').text().replace(/£/, "")),
      'row': $(this)
    });
  })

  //Sort the data smallest to largest
  dataRows.sort(function(a, b) {
    return a.amount - b.amount;
  });

  //Remove existing table rows.  This assumes that everything should be deleted, adjust selector if needed :).
  $('#internalActivities > tbody').empty();

  //Add rows back to table in the correct order.
  dataRows.forEach(function(ele) {
    $('#internalActivities > tbody').append(ele.row);
  })
});

jQuery(document).ready(function($) {

  var trs = $("#internalActivities tbody tr");
  var btnMore = $("#seeMoreRecords");
  var btnLess = $("#seeLessRecords");
  var trsLength = trs.length;
  var currentIndex = 3,
    page = 3;

  trs.hide();
  trs.slice(0, currentIndex).show();
  checkButton();

  btnMore.click(function(e) {
    e.preventDefault();
    trs.slice(currentIndex, currentIndex + page).show();
    currentIndex += page;
    checkButton();
  });

  btnLess.click(function(e) {
    e.preventDefault();
    trs.slice(currentIndex - page, currentIndex).hide();
    currentIndex -= page;
    checkButton();
  });

  function checkButton() {
    var currentLength = trs.filter("tr:visible").length;

    if (currentLength >= trsLength) {
      btnMore.hide();
    } else {
      btnMore.show();
    }

    if (trsLength > page && currentLength > page) {
      btnLess.show();
    } else {
      btnLess.hide();
    }

  }
  $('#filter-free').change(function() {
    var $all = $("#internalActivities tbody tr").hide();
    trs = this.checked ? $all.has('.free') : $all;
    trsLength = trs.length;
    trs.slice(0, page).show();
    currentIndex = page;
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Table sorting on page load with paging</h1>

<input type="checkbox" id="filter-free">Free Handset

<table id="internalActivities">
  <thead>
    <tr>
      <th>head1</th>
      <th>head2</th>
      <th>head3</th>
      <th>head4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td><span class="handsetcost">£364.00 upfront</span>
        <br><span class="amount">£10.10 per month</span>
      </td>
    </tr>

    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td><span class="free">No upfront cost</span>
        <br><span class="amount">£40.40 per month</span>
      </td>
    </tr>

    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td><span class="free">No upfront cost</span>
        <br><span class="amount">£30.30 per month</span>
      </td>
    </tr>

    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td><span class="free">No upfront cost</span>
        <br><span class="amount">£16.04 per month</span>
      </td>
    </tr>

    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td><span class="handsetcost">£134.00 upfront</span>
        <br><span class="amount">£12.19 per month</span>
      </td>
    </tr>

    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td><span class="handsetcost">£120.00 upfront</span>
        <br><span class="amount">£14.22 per month</span>
      </td>
    </tr>

    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td><span class="free">No upfront cost</span>
        <br><span class="amount">£50.22 per month</span>
      </td>
    </tr>
    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td><span class="free">No upfront cost</span>
        <br><span class="amount">£10.33 per month</span>
      </td>
    </tr>

    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td><span class="free">No upfront cost</span>
        <br><span class="amount">£40.45 per month</span>
      </td>
    </tr>

    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td><span class="handsetcost">£200.00 upfront</span>
        <br><span class="amount">£30.84 per month</span>
      </td>
    </tr>

    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td><span class="free">No upfront cost</span>
        <br><span class="amount">£16.14 per month</span>
      </td>
    </tr>

    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td><span class="free">No upfront cost</span>
        <br><span class="amount">£12.10 per month</span>
      </td>
    </tr>

    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td><span class="free">No upfront cost</span>
        <br><span class="amount">£14.02 per month</span>
      </td>
    </tr>

    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td><span class="free">No upfront cost</span>
        <br><span class="amount">£50.88 per month</span>
      </td>
    </tr>
  </tbody>
</table>

<input type="button" id="seeMoreRecords" value="More">
<input type="button" id="seeLessRecords" value="Less">

Collectives™ on Stack Overflow

Checkbox Filter HTML Table jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related