jQuery table header sort

Question

Anybody know of a plugin, or a built in function to make the columns in a table sortable? i.e. I click on the column header and it sorts the rows by that column?

Answer 1

http://tablesorter.com/docs/ is very simple to use with a wide range of options to suit your needs. :)

Answer 2

http://www.flexigrid.info/

Flexigrid is a very popular, and easy table manager/sorter to use.

Answer 3

Here's two that sort and do many other things as well that I did not yet see listed :

• DataTables
• SlickGrid

Here is also a table comparing many data tables: http://blog.sematext.com/2011/09/19/top-javascript-dynamic-table-libraries/

Answer 4

A little heavyweight, but the ultimate jQuery table manager is jqGrid

Answer 5

A jquery plugin that makes sort, filter and pagination: breedjs

Example:

Put the data in a js object to do just like so:

var data = {
    people: [
        {name: 'a', address: 'c', salesperson: 'b'},
        {name: 'b', address: 'b', salesperson: 'a'},
        {name: 'c', address: 'a', salesperson: 'c'},
    ]
};

breed.run({
    scope: 'people',
    input: data
});

HTML:

<table>
    <thead>
        <tr>
            <th sort='name'>Name</th>
            <th sort='address'>Address</th>
            <th sort='salesperson'>Sales Person</th>
        </tr>
    </thead>
    <tbody>
        <tr b-scope="people" b-loop="person in people">
            <td b-sort="name">{{person.name}}</td>
            <td b-sort="address">{{person.address}}</td>
            <td b-sort="salesperson">{{person.salesperson}}</td>
        </tr>
    </tbody>
</table>

Now, everytime you want to sort by salesperson, just call it:

breed.sort({
    scope: 'people',
    selector: //field name
});

See:

$("th").click(function(){
    breed.sort({
        scope: 'people',
        selector: $(this).attr('sort')
    });
});

Working example on fiddle

Answer 6

The Ext JavaScript library is very good at that.