Filter Through Large Tables With Form Controls - Filtable

A small (2kb minified), cross-browser, high-performance table filter plugin that allows the visitor to quickly filter through your large tabular data with several form controls.

More features:

• Allows you to specify the column(s) to filter.
• Supports input field, select box and even checkbox input.
• Supports Stupid Table jQuery plugin which provides a sorting functionality for the results.
• Custom CSS styles for results.

How to use it:

1. Include the jQuery Filtable plugin's script after loading the latest jQuery library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="filtable.js"></script>

2. Create filter controls and specify which table columns you want to filter using the data-filter-col attribute. The data-filter-val attribute is used to specify the search keyword when using a checkbox to filter through your table.

<div class="table-filters">
  <label for="filter-country">Name:</label>
  <input type="text" class="input-text" id="filter-name" data-filter-col="0,1">

  <label for="filter-city">City:</label>
  <select id="filter-city" data-filter-col="2" style="min-width:60px">
    <option value="">- All -</option>
    <option value="j">J</option>
    <option value="k">K</option>
    <option value="ll">LL</option>
  </select>

  <label for="filter-country">Country:</label>
  <input type="text" class="input-text" id="filter-country" data-filter-col="3">

  <label for="filter-tick">
    <input type="checkbox" id="filter-tick" data-filter-col="0,1,2,3" data-filter-val="B"> B</label>

</div>

3. Initialize the plugin and specify which container holds the filter controls.

$(function(){
  $('table').filtable({ 
    controlPanel: $('.table-filters')
  });
});

4. You can also create your own filters as follows:

var myfilters = [{ columns: '0,1', value: 'a' }, { column: 3, value: 'b' }];
$('#table').filtable('filter', {
  filters: myfilters
});

5. Apply your own styles to the results using the zebra striping classes.

table tr:nth-child(even) > td,
table tr.even > td {
  background-color: #222;
}
table tr:nth-child(odd) > td,
table tr.odd > td {
  background-color: #333;
}

table tr.hidden {
  display: none;
}

6. Event handlers which will be fired after/before filtering.

$('table').on('beforetablefilter', function (event) {
  // before
});

$('table').on('aftertablefilter', function (event) {
  // after
});

Changelog:

v1.2 (2023-12-12)

• Use deep clone
• Support checkboxes in hash URLs

---

This awesome jQuery plugin is developed by svivian. For more Advanced Usages, please check the demo page or visit the official website.