Wednesday, February 22, 2012

Sorting HTML table with jquery

Sorting tables in HTML becomes easier with tablesorter. Tablesorter is a jQuery plugin and it has many good features, such as -
Multi-column sorting
Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. Add your own easily
And many more...

While implementing it we need to add one plugin in the HEAD section

<script src="jquery.tablesorter.js"></script><!--[Sorting Table]-->

The jquery code goes something like this -
//jquery table sorter code
$("#sortThisTable").tablesorter({       
    headers: {
            // assign the first column (we start counting zero)
            0: {               
                sorter: false
            }
           
        },       
        sortList:[[2,0]], widgets: ['zebra']       
});

And your HTML has to be like -
<table id="sortThisTable" class="tablesorter">
    <thead>
        <tr>
            <th>Sr.No</th>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Dave</td>
            <td>Barber</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Nanno</td>
            <td>Vsome</td>
        </tr>

    </tbody>
</table>


Download the source here - http://tablesorter.com/docs/#Download