HTML Table Sorting in jQuery

Question

I have simple HTML Table, I need to add sorting and grouping on every columns in jQuery.

<table cellspacing='0'>
<thead>
    <tr>
        <th>Task Details</th>
        <th>Progress</th>
        <th>Vital Task</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Create pretty table design</td>
        <td>100%</td>
        <td>Yes</td>
    </tr>

</tbody>

awesome. I need stuff too sometimes. But what have you tried? — Rene Pot, Jun 19 '13 at 13:36

score 4 · Answer 1 · answered Jun 19 '13 at 13:36

4

You could use tablesorter for this. It's very simple to use.

$(document).ready(function() { 
   $("#myTable").tablesorter();  // <-- 'myTable' is the id of your table    
});

Here you could check a working demo

answered Jun 19 '13 at 13:36

Claudio Redi

67,454
15
130
155

score 4 · Accepted Answer · answered Jun 19 '13 at 13:37

4

There are various plugins to perform this using jQuery. The most known one is jQuery tablesorter:

http://tablesorter.com/docs/

There are loads of such plugins here, pick the one you like most:

http://www.tripwiremagazine.com/2013/06/jquery-filter-sort-plugins.html

answered Jun 19 '13 at 13:37

Filippos Karapetis

4,367
21
39

Can any one give me code for this, no plugin. – Waqas Zahoor Jun 19 '13 at 13:41
Check here: http://stackoverflow.com/questions/3160277/jquery-table-sort - however, it didn't work for me - the table isn't sortable. Why don't you want to use a plugin? – Filippos Karapetis Jun 19 '13 at 13:49
i want to use int within my own plugin.. – Waqas Zahoor Jun 20 '13 at 12:00
Check the code of these plugins and adapt it to your own one. Or, you can simply make a requirement in your plugin that it needs another plugin in order to work (like jQuery UI needs jQuery, for example) – Filippos Karapetis Jun 20 '13 at 12:11

score 4 · Answer 3 · answered Jun 19 '13 at 13:38

4

I suggest using datatables, you use it like this:

$(document).ready(function(){
    $('#example').dataTable();
});

answered Jun 19 '13 at 13:38

isJustMe

5,452
2
31
47

score 0 · Answer 4 · answered Jun 19 '13 at 13:36

0

Do not reinvent the wheel. Use jquery tablesorter plugin.

answered Jun 19 '13 at 13:36

DhruvPathak

42,059
16
116
175

HTML Table Sorting in jQuery

4 Answers4

Linked