JQuery sort table rows on column value

Posted by Niklas on August 16, 2013 Leave a comment (21) Go to comments

Sorting tables dynamically with javascript is often a smooth solution to your sorting problems. I’m here going to put a simple solution that I have been using for a while. I have in no means created this solution – I found it somewhere on the web and now I just want to put it here for easy access.

The table needs to have the following structure for this solution to work:


  
    column1 column2 column3
  
  
    value1 value2 value3
    value4 value5 value6
    value7 value8 value9

column1	column2	column3
value1	value2	value3
value4	value5	value6
value7	value8	value9

The critical parts here is that the table needs an id and a tbody. Without those the sorting will not work

Here is the JQuery code (standard JQuery, no plugins needed)

function sortTable(){
  var rows = $('#mytable tbody  tr').get();

  rows.sort(function(a, b) {

  var A = $(a).children('td').eq(1).text().toUpperCase();
  var B = $(b).children('td').eq(1).text().toUpperCase();

  if(A < B) {
    return -1;
  }

  if(A > B) {
    return 1;
  }

  return 0;

  });

  $.each(rows, function(index, row) {
    $('#mytable').children('tbody').append(row);
  });
}

To sort according to the second column we use ‘.eg(1)’ in row 6 and 7. Second column ‘.eg(3)’ and so on

Here is a JSFiddle of the solution: JQuery sort table rows on column value

Tested on Chrome v44.0.2403.155 (64-bit) and JQuery 1.9.1

JavascriptJQuery

← Changing date format in Trac using mod_wsgi

JQuery color every other row in a table →

21 Comments.

David Smith October 22, 2013 at 06:05

This is nice. I made some slight mods so I could sort by direction and have alternate row colors.

function sortTable(col,dir){
  var rows = $('#livefeeds tbody  tr').removeClass('row_alt').get();
  
  var t=1;
  if(!dir || dir=='dec') {
	  t=-1;
  } else if(dir=='asc') {
	  t=1;
  }
  rows.sort(function(a, b) {
	  var A = $(a).children('td').eq(col).text().toUpperCase();
	  var B = $(b).children('td').eq(col).text().toUpperCase();
	
	  if(A  B) {
		return t;
	  }
	
	  return 0;
  });

  $.each(rows, function(index, row) {
	$('#livefeeds').children('tbody').append(row);
		if( index%2 == 1){
			$(row).addClass('row_alt');
		}
	
  });
}

Niklas October 22, 2013 at 06:55

Nice. Thank you. I’ll post it so it might benefit someone else too

Reply

Santhosh Kumar February 15, 2014 at 15:56

ya its working now

Reply
Ashfaq Ahmad May 26, 2014 at 09:54

Thanks for the share. Helped and Saved my time.

Reply
Shane July 9, 2014 at 18:09

Thanks so much, that saved me a lot of time!

Reply

Patrick Kubrat August 28, 2014 at 18:58

thank you very much, this helped me a lot (and I could avoid a postback in asp.net)

I did some extra things, to enable sorting for more than one row and alternating sort order

    function sortTable(sortCriterium) { //sortCriterium is the row name
        var rows;
        var sortOrder;
        if (retreiveLastSortCriterium() !== sortCriterium) {
            persistSortOrder(1);
        }
        persistLastSortCriterium(sortCriterium);

        sortOrder = retreiveSortOrder();

        rows = $gridTable.find("tbody tr:gt(0)").get();
        rows.sort(function(a, b) {
            var A, B;
            var $a, $b;
            var $cellA, $cellB;

            $a = $(a);
            $b = $(b);
            $cellA = $(a).children('td').eq(sortCriterium);
            $cellB = $(b).children('td').eq(sortCriterium);

            switch (sortCriterium) {
				/* find text for A and B depending on cell  */
			}
            return A === "" ? 1 : B === "" ? -1 : (A.toUpperCase().toString().localeCompare(B.toUpperCase())) * sortOrder;
        });

        $.each(rows, function(index, row) {
            $gridTable.children('tbody').append(row);
        });
        persistSortOrder(sortOrder * -1);
    }

I can now sort several columns and the 2nd click on the same colum orders desc instead of asc. Empty rows come last.
persist… and retreive access a backing hidden fild to survive asp.net postbacks

Niklas September 1, 2014 at 06:41

Many thanks for sharing this!

Reply

Ron December 30, 2014 at 03:57

I have a table with 8 rows that I sort on column one(1). When I run the code it sorts that data correctly but i end up with the data duplicate(and sorted) 8 times. What am I missing? How do I prevent the data being duplicated and sorted 8 times?

Thanks.

Reply
- Niklas August 19, 2015 at 08:33
  
  I’m not sure what your problem can be but you can play around with my solution here: http://jsfiddle.net/malen/6sskjbod/ Maybe you get lucky and find out what’s wrong 🙂
  
  Reply
umakant August 4, 2015 at 12:31

what returns 1 or -1 do in this case

Reply
- Niklas August 4, 2015 at 12:41
  
  If -1, A is less than B and if 1 B is less than A. It sorts according to alphanumeric order, based on the TD element text
  
  Reply
Shaiwal September 6, 2015 at 14:18

Great Code
Thanks
😛

Reply
Eythan February 2, 2016 at 20:13

You do not require an id.

var table = that.closest(‘table’);
var tbody = table.find(‘tbody’);
var rows = tbody.find(‘tr’).get();

Reply
- Niklas February 3, 2016 at 08:07
  
  Yep, that is correct. I usually use an id on all my function tags so that did not occur to me 🙂
  
  Reply
Chris March 9, 2016 at 18:31

I would update line #2 to the following to handle nested tables. If not it will attempt to sort the nested table rows.

var rows = $(‘#livefeeds>tbody>tr’).get();

In addition if you are attempting to sort a date, you will need to cast it as a date value or sort the text by unix time or a YYYY/MM/DD format.

Reply
- Niklas March 10, 2016 at 08:14
  
  Good stuff – thanks for sharing!
  
  Reply
Ezra Obiwale March 21, 2016 at 08:31

Very nice. Small and effective. Thumbs up.

Reply
richa tayal December 4, 2016 at 10:24

from this line
var rows = $(‘#mytable tbody tr’).get();
i was getting blank array. please let me know what happen

Reply
- Niklas December 4, 2016 at 11:18
  
  Hi Richa,
  
  Does your table have id=”mytable”? If not, you need to change the “#mytable” to whatever your table is called
  
  Reply
Mike November 29, 2018 at 20:35

I’m pretty new to jQuery. The code you posted works perfectly but I’m having trouble understanding something. I don’t see anything in the code that explicitly clears the content of before sorting the array of rows. Why doesn’t the append() call applied to each row result in a duplicate of the row being added to the end of ?

If the object being appended by append() is already part of the target’s content then is it moved from its current location to the end instead of adding a new copy?

Thanks in advance!

Reply
- Niklas December 1, 2018 at 14:41
  
  Hi there, Yes you assumption is correct. You can read more about the append() functino in JQuery here: http://api.jquery.com/append/
  
  Reply