Minimal jQuery Table Sorter and Filter Plugin - table.js

table.js is a super simple yet useful jQuery plugin for sorting, filtering and formatting your html tables.

You may also like:

• Flexible jQuery Drag and Drop Sorting Plugin - Sortable
• Animated Table Sorting Plugin For jQuery
• Sortable Lists and Grids with jQuery & HTML5 - html5sortable
• Html Elements Sorting and Filtering Plugin - List.js
• Flexible Client-Side Table Sorting Plugin - tablesorter
• Easy jQuery Table Sorter Plugin - Andras Sortable Table

Basic Usage:

1. Include the latest jQuery library and table.js on the web page

<script src='http://code.jquery.com/jquery.min.js'></script>
<script src='jquery.table.js'></script>

2. Create a table. Using data-type attributes to specify the data type for sorting.

<table id='countries'>
<thead>
<tr>
<th data-type='int'>Rank</th>
<th>Country</th>
<th data-type='int'>Players</th>
</tr>
</thead>
<tbody>
<tr class='group'>
<td>1</td>
<td>Argentina</td>
<td>171,000,000</td>
</tr>
<tr>
<td></td>
<td>(1) Lionel Messi (FC Barcelona)</td>
<td>+120,000,000</td>
</tr>
<tr>
<td></td>
<td>(6) Kun Agüero (Manchester City)</td>
<td>51,000,000</td>
</tr>
<tr class='group'>
<td>2</td>
<td>Spain</td>
<td>167,000,000</td>
</tr>
<tr>
<td></td>
<td>(3) Andrés Iniesta (FC Barcelona)</td>
<td>+70,000,000</td>
</tr>
<tr>
<td></td>
<td>(5) Cesc Fàbregas (FC Barcelona)</td>
<td>+55,000,000</td>
</tr>
<tr>
<td></td>
<td>(11) Sergio Busquets (FC Barcelona)</td>
<td>+42,000,000</td>
</tr>
<tr class='group'>
<td>3</td>
<td>Portugal</td>
<td>100,000,000</td>
</tr>
<tr>
<td></td>
<td>(2) Cristiano Ronaldo (Real Madrid)</td>
<td>+100,000,000</td>
</tr>
</tbody>
</table>

3. The CSS

th {
background-color: silver;
}
/* add hover effect for table rows */  
td.hovered {
background-color: lightskyblue;
}
th.sortable {
cursor: pointer;
padding-right: 23px;
background-repeat: no-repeat;
background-position: right center;
background-image: url('i/bg.gif');
}
th.sortable.sorted-asc,  th.sortable.sorted-desc {
color: white;
background-color: grey;
}
th.sortable.sorted-asc {
background-image: url('i/asc.gif');
}
th.sortable.sorted-desc {
background-image: url('i/desc.gif');
}
th.sortable:hover {
color: black;
background-color: yellow;
text-decoration: underline;
}

4. The javascript

<script>
  $(document).ready(function() {
      table_sorter( '#countries', { groupClass: 'group' } ).hover();
  });
</script>

 

---

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