Super Lightweight jQuery Table Sort Plugin - sortColumn

File Size: 5.23 KB
Views Total: 1568
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Super Lightweight jQuery Table Sort Plugin - sortColumn

sortColumn is a tiny yet useful jQuery plugin which allows you to sort a particular column in a table by clicking on the column header.

Data format supported:

  • String
  • Number
  • Currency
  • Date (dd/mm/yyyy)

How to use it:

1. Import jQuery library and the jQuery sortColumn plugin at the end of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src='jQuery_sortColumn.js'></script>

2. Create a data table.

<table id="table-demo">
  <thead>
    <tr>
      <th id="column-header">Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Adam</td>
    </tr>
    <tr>
      <td>Jonh</td>
    </tr>
    <tr>
      <td>Peter</td>
    </tr>
    <tr>
      <td>Sam</td>
    </tr>
    <tr>
      <td>Zack</td>
    </tr>
  </tbody>
</table>

3. Enable the plugin with options.

var sortOrder1='asc';
jQuery('#column-header').click(function(){
if (sortOrder1=='asc'){
jQuery("#table-demo").sortColumn({
index: 1, // index is 1 based instead of 0 based because of css nth:child(index)
order: 'desc', // asc or desc
format: 'string' // string, number, currency or date format
});
sortOrder1='desc';
} else {
jQuery("#table-demo").sortColumn({
index: 1,
order: 'asc',
format: 'string'
});
sortOrder1='asc';
}
});

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