How to sort HTML table rows using different jQuery plugins?

There are many jQuery plugins available to deal with table. They provide capability of sorting, paginating, filtering tabular data.

Popular jQuery table sorting plugins:-

1. Data Tables – ▼ jump to implementation
2. Table sorter – ▼ jump to implementation
3. Stupid Table – ▼ jump to implementation

Let’s take sample – order receipt tabular data for demo to implement it using above plugins.

<table id="demo_datatables">
   <thead>
      <tr>
         <th>Order Id</th>
         <th>Item</th>
         <th>Qty</th>
         <th>Price</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td>Pizza</td>
         <td>1</td>
         <td>345</td>
      </tr>
      <tr>
         <td>2</td>
         <td>Garlic Bread</td>
         <td>3</td>
         <td>120</td>
      </tr>
      <tr>
         <td>3</td>
         <td>Coke</td>
         <td>7</td>
         <td>70</td>
      </tr>
      <tr>
         <td>2</td>
         <td>Pasta</td>
         <td>2</td>
         <td>210</td>
      </tr>
   </tbody>
   <tfoot>
      <tr>
         <td colspan="3">Total</td>
         <td>745</td>
      </tr>
   </tfoot>
</table>

[1] Table sorting using jQuery datatables.js plugin

Initialization of plugin with CDN scripts and CSS

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.3/jquery.dataTables.min.js"></script> 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables.min.css" />

Sorting table with DataTable() method

$(document).ready(function() {
    var table = $('#demo_datatables').DataTable();
});

 jQuery datatable() plugin demo

Grab code using view source

[2] Table sorting using jQuery tablesorter.js plugin

Initialization of plugin with cdn scripts and css

<script src="https://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.13.3/jquery.tablesorter.min.js"></script>

Sorting table with tablesorter() method

$(document).ready(function() {
    $("#demo_tablesorter").tablesorter();
});

 jQuery tablesorter() plugin demo

Grab code using view source

[3] Table sorting using jQuery stupidtable.js plugin

Initialization of plugin with cdn scripts and css

<script src="https://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/stupidtable/0.0.1/stupidtable.min.js"></script>

Basic Setup – specify data attributes for sorting

<thead>
   <tr>
      <th data-sort="int">Order Id</th>
      <th data-sort="string">Item</th>
      <th data-sort="int">Qty</th>
      <th data-sort="float">Price</th>
   </tr>
</thead>

Sorting table with stupidtable() method

$(document).ready(function() {
    $("#demo_stupidtable").stupidtable();
});

jQuery stupidtable() plugin demo

Grab code using view source