JQuery – Multi Column Table sorting

JQuery + tablesorter plugin is a nice way of implementing multi column table sorting. All you need to do
is include two javascripts in your source code.

In rails, I did it like this with minified versions of both the jss:

<%= javascript_include_tag "jquery-min" %>
<%= javascript_include_tag "jquery.tablesorter.min" %>

In plain html, that would resolve to

<script type="text/javascript" src="/path/to/jquery-min.js"></script>
<script type="text/javascript" src="/path/to/jquery.tablesorter.min.js"></script>

In rails, prototype comes by default and to avoid the conflict, it is advised to use JQuery’s
noConflict method.

<script type="text/javascript">

So the code mentioned above applies the tablesorter to the table with id as ‘my Table’. The table should have the

thead & tbody

specified. It would be something like this:

<table id="myTable">
   <th>Last Name</th>
   <th>First Name</th>

Also, to add pretty styling to the table with multi column sorting, you could add something like ..

 table.tablesorter {
  background-color: #CDCDCD;
  margin:10px 0pt 15px;
  font-size: 8pt;
  width: 100%;
  text-align: left;
 table.tablesorter thead tr th, table.tablesorter tfoot tr th {
  background-color: #e6EEEE;
  border: 1px solid #FFF;
  font-size: 8pt;
  padding: 4px;
 table.tablesorter thead tr .header {
  background-image: url(blue/bg.gif);
  background-repeat: no-repeat;
  background-position: center right;
  cursor: pointer;
 table.tablesorter tbody td {
  color: #3D3D3D;
  padding: 4px;
  background-color: #FFF;
  vertical-align: top;
 table.tablesorter tbody tr.odd td {
 table.tablesorter thead tr .headerSortUp {
  background-image: url(blue/asc.gif);
 table.tablesorter thead tr .headerSortDown {
  background-image: url(blue/desc.gif);
 table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
  background-color: #8dbdd8;

Enjoy sorting with multiple columns ..🙂

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s