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

Total
0
Shares
Leave a Reply

Your email address will not be published.

 
Previous Post

Downgrading Internet Explore 11 to IE 10 for Developer Tools issues

Next Post

How to manipulate cookie of array, object and json datatype using jQuery Plugins?

Related Posts