Checkbox Filter HTML Table jQuery

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.

Answers 1

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


Related Articles