Jquery – Filtering a table rows.

Here’s an useful code to filter a table with keyword. This is mostly used when we need to find some specific rows from a long table.

1. 1st of all your table must have ID, ie.

<table id="mytableid">
  <thead>
    <tr> <th>Item 1</th> <th>Item 2</th> <th>Item 3</th> </tr>
    </thead>
  <tbody>
    <tr class="odd" style=""> <td>...</td> <td>...</td> <td>...</td> </tr>
    <tr class="even" style=""> <td>...</td> <td>...</td> <td>...</td> </tr>
  </tbody>
</table>

2. Add this javascript function with your Jquery JS file or HTML.

<script type="text/javascript"> 
function filter_table_row(tableid){    
 var filter_form = '<div style="padding: 5px 0;">Filter : <input type="text" name="filter-'+tableid+'" value="" size="50" /></div>';    
 $(tableid).parent().prepend(filter_form);    
 $('input[name=filter-'+tableid+']').focus().keyup(function() {      
 var filterword = $(this).val();
 filterword = filterword.replace('(', '');
 filterword = filterword.replace(')', '');
 filterword = filterword.replace('"', '');
 filterword = filterword.replace('#', '');
 filterword = filterword.replace('$', '');
    $(tableid+' tbody tr:not(:contains("' + filterword + '"))').hide();
    $(tableid+' tbody tr:contains("' + filterword + '")').show();
  }); 
} 
</script>

3. Now from your HTML or JS file call this function with the table ID

<script type="text/javascript"> filter_table_row('mytableid'); </script>

– This will automatically make your table filterable.

<table width=”100%” class=”sticky-enabled” id=”pwcs_productdeatils_alloptions_table”>
<thead><tr><th style=”padding-left: 30px;” colspan=”2″>Attribute Group : Attribute</th><th>Sub SKU</th><th>Stock on hand</th><th>Price Change</th> </tr></thead>
<tbody>
<tr class=”odd” style=””><td><input type=”radio” class=”form-radio” value=”628″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-112″></td><td>COLOR : <b>RED</b></td><td>SUB SKU – 1</td><td>12</td><td>Add $12.5</td> </tr>
<tr class=”even” style=””><td><input type=”radio” class=”form-radio” value=”630″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-113″></td><td>COLOR : <b>BLUE</b></td><td>SUB SKU – 2</td><td>12</td><td>Add $11</td> </tr>
<tr class=”odd” style=””><td><input type=”radio” class=”form-radio” value=”628,632″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-114″></td><td>COLOR : <b>RED</b> | SIZE : <b>SMALL</b></td><td>SUB SKU – 3</td><td>12</td><td>Add $10</td> </tr>
<tr class=”even” style=””><td><input type=”radio” class=”form-radio” value=”628,633″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-115″></td><td>COLOR : <b>RED</b> | SIZE : <b>MEDIUM</b></td><td>SUB SKU – 4</td><td>12</td><td>Add $11</td> </tr>
<tr class=”odd” style=””><td><input type=”radio” class=”form-radio” value=”628,634″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-116″></td><td>COLOR : <b>RED</b> | SIZE : <b>LARGE</b></td><td>SUB SKU – 5</td><td>12</td><td>Add $9</td> </tr>
<tr class=”even” style=””><td><input type=”radio” class=”form-radio” value=”630,632″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-117″></td><td>COLOR : <b>BLUE</b> | SIZE : <b>SMALL</b></td><td>SUB SKU – 6</td><td>12</td><td>Add $12</td> </tr>
<tr class=”odd” style=””><td><input type=”radio” class=”form-radio” value=”630,633″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-118″></td><td>COLOR : <b>BLUE</b> | SIZE : <b>MEDIUM</b></td><td>SUB SKU – 7</td><td>12</td><td>Add $12</td> </tr>
<tr class=”even” style=””><td><input type=”radio” class=”form-radio” value=”630,634″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-119″></td><td>COLOR : <b>BLUE</b> | SIZE : <b>LARGE</b></td><td>SUB SKU – 8</td><td>12</td><td>Add $12</td> </tr>
<tr class=”odd” style=””><td><input type=”radio” class=”form-radio” value=”632″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-120″></td><td>SIZE : <b>SMALL</b></td><td>SUB SKU – 9</td><td>12</td><td>Add $12</td> </tr>
<tr class=”even” style=””><td><input type=”radio” class=”form-radio” value=”633″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-121″></td><td>SIZE : <b>MEDIUM</b></td><td>SUB SKU – 10</td><td>12</td><td>Add $12</td> </tr>
<tr class=”odd” style=””><td><input type=”radio” class=”form-radio” value=”634″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-122″></td><td>SIZE : <b>LARGE</b></td><td>SUB SKU – 11</td><td>12</td><td>Add $12</td> </tr>
<tr class=”even” style=””><td><input type=”radio” class=”form-radio” value=”628,636″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-123″></td><td>COLOR : <b>RED</b> | MATERIALS : <b>COTTON</b></td><td>SUB SKU – 12</td><td>12</td><td>Add $12</td> </tr>
<tr class=”odd” style=””><td><input type=”radio” class=”form-radio” value=”630,636″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-124″></td><td>COLOR : <b>BLUE</b> | MATERIALS : <b>COTTON</b></td><td>SUB SKU – 13</td><td>12</td><td>Add $12</td> </tr>
<tr class=”even” style=””><td><input type=”radio” class=”form-radio” value=”628,632,636″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-125″></td><td>COLOR : <b>RED</b> | SIZE : <b>SMALL</b> | MATERIALS : <b>COTTON</b></td><td>SUB SKU – 14</td><td>12</td><td>Add $12</td> </tr>
<tr class=”odd” style=””><td><input type=”radio” class=”form-radio” value=”628,633,636″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-126″></td><td>COLOR : <b>RED</b> | SIZE : <b>MEDIUM</b> | MATERIALS : <b>COTTON</b></td><td>SUB SKU – 15</td><td>12</td><td>Add $12</td> </tr>
<tr class=”even” style=””><td><input type=”radio” class=”form-radio” value=”628,634,636″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-127″></td><td>COLOR : <b>RED</b> | SIZE : <b>LARGE</b> | MATERIALS : <b>COTTON</b></td><td>SUB SKU – 16</td><td>12</td><td>Add $12</td> </tr>
<tr class=”odd” style=””><td><input type=”radio” class=”form-radio” value=”630,632,636″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-128″></td><td>COLOR : <b>BLUE</b> | SIZE : <b>SMALL</b> | MATERIALS : <b>COTTON</b></td><td>SUB SKU – 17</td><td>12</td><td>Add $12</td> </tr>
<tr class=”even” style=””><td><input type=”radio” class=”form-radio” value=”630,633,636″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-129″></td><td>COLOR : <b>BLUE</b> | SIZE : <b>MEDIUM</b> | MATERIALS : <b>COTTON</b></td><td>SUB SKU – 18</td><td>12</td><td>Add $12</td> </tr>
<tr class=”odd” style=””><td><input type=”radio” class=”form-radio” value=”630,634,636″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-130″></td><td>COLOR : <b>BLUE</b> | SIZE : <b>LARGE</b> | MATERIALS : <b>COTTON</b></td><td>SUB SKU – 19</td><td>12</td><td>Add $12</td> </tr>
<tr class=”even” style=””><td><input type=”radio” class=”form-radio” value=”632,636″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-131″></td><td>SIZE : <b>SMALL</b> | MATERIALS : <b>COTTON</b></td><td>SUB SKU – 20</td><td>12</td><td>Add $12</td> </tr>
<tr class=”odd” style=””><td><input type=”radio” class=”form-radio” value=”633,636″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-132″></td><td>SIZE : <b>MEDIUM</b> | MATERIALS : <b>COTTON</b></td><td>SUB SKU – 21</td><td>12</td><td>Add $12</td> </tr>
<tr class=”even” style=””><td><input type=”radio” class=”form-radio” value=”634,636″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-133″></td><td>SIZE : <b>LARGE</b> | MATERIALS : <b>COTTON</b></td><td>SUB SKU – 22</td><td>12</td><td>Add $12</td> </tr>
<tr class=”odd” style=””><td><input type=”radio” class=”form-radio” value=”636″ name=”pwcs-productdetails-select-options” id=”pwcs-productdetails-select-options-134″></td><td>MATERIALS : <b>COTTON</b></td><td>SUB SKU – 23</td><td>12</td><td>Add $12</td> </tr>
</tbody>
</table>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s