searchable-table

searchable-table

Create search capability on HTML tables

Usage

Basic general search

By default a general input search is appended to the header/top of the table.

  <table class="your-selector">
    ...
  </table>

$('table.your-selector').toSearchable();

Column search

If enableGeneralSearch is disabled a search input will be added to each column header and filter is applied to the column content.

  <table class="your-selector">
    ...
  </table>

$('table.your-selector').toSearchable({enableGeneralSearch: false});

Fixed

Use the class searchable-fixed-row to mark a row as fixed.

  <table class="your-selector">
    <tr class="searchable-fixed-row">
    ...
    </tr>
    ...
  </table>

Custom header style

Add headerTRStyle property when applying toSearchable

  $('table.your-selector').toSearchable({headerTRStyle: 'my-custom-style'});

Maintainers

Xiaojun Ren [e-mail]

Marcelo Garcia de Oliveira [e-mail]