jQuery Plugin To Sort Table Rows By Content - jq.TableSort

Just another jQuery based table sorter plugin which allows sorting html table rows in descending or ascending order. Clicking on the table header will automatically change the sort order.

How to use it:

1. Just insert the JavaScript file 'jq.tablesort.js' after jQuery library and the table sorter is ready for use.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jq.tablesort.js"></script>

2. Add the required CSS style 'sortStyle' to the target header cells in your HTML table.

<table id="myTable">
  <thead>
    <tr>
      <th class="sortStyle">Last Name</th>
      <th class="sortStyle">First Name</th>
      <th class="sortStyle">Email</th>
      <th class="sortStyle">Due</th>
      <th class="sortStyle">Web Site</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Smith</td>
      <td>John</td>
      <td>[email protected]</td>
      <td>$50.00</td>
      <td>http://www.jsmith.com</td>
    </tr>
    <tr>
      <td>Bach</td>
      <td>Frank</td>
      <td>[email protected]</td>
      <td>$50.00</td>
      <td>http://www.frank.com</td>
    </tr>
    <tr>
      <td>Doe</td>
      <td>Jason</td>
      <td>[email protected]</td>
      <td>$100.00</td>
      <td>http://www.jdoe.com</td>
    </tr>
    <tr>
      <td>Conway</td>
      <td>Tim</td>
      <td>[email protected]</td>
      <td>$50.00</td>
      <td>http://www.timconway.com</td>
    </tr>
  </tbody>
</table>

3. Style the table sorter in the CSS as these:

.sortStyle { cursor: pointer; }

.ascStyle {
  background-image: url(img/asc.gif);
  background-repeat: no-repeat;
  background-position: center right;
}

.descStyle {
  background-image: url(img/desc.gif);
  background-repeat: no-repeat;
  background-position: center right;
}

.unsortStyle {
  background-image: url(img/bg.gif);
  background-repeat: no-repeat;
  background-position: center right;
}

4. All configuration options.

{
  defaultColumn:  0, 
  defaultOrder:   'asc', 
  styles:         {
    'sort'  :   'sortStyle', 
    'asc'   :   'ascStyle', 
    'desc'  :   'descStyle', 
    'unsort':   'unsortStyle'
  }, 
}

Change log:

2017-10-03

• Minor improvements.

---

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