:::: MENU ::::

How to sort HTML table rows using different jQuery plugins?

jquery_logo

There are many jQuery plugin available to deal with table. They provides 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


So, what do you think ?

  •