Sort table row with jquery

Question

I'm trying to sort table row using jquery which has function like this:

                var items = $('#dp_content_table > tbody > tr').sort(function(a, b) {
                    var vA = $(a).attr('id');
                    var vB = $(b).attr('id');

                    var arrA = vA.split('_');
                    var arrB = vB.split('_');

                    return (arrA[1] < arrB[1]) ? -1 : (arrA[1] > arrB[1]) ? 1 : (arrA[1] == arrB[1] && arrA[5] < arrB[5]) ? -1 : (arrA[1] == arrB[1] && arrA[5] > arrB[5]) ? 1 : 0;
                });

                    $('#dp_content_table > tbody > tr').append(items);

Basically, I'm using ID as attribute for sorting. The attribute contain day & time. attr[1] is day, and attr[5] is time. If day in row A is less than B, then no need for comparing the time, and return result, on the other hand, if days are same, then compare the second attribute which is the time, and so on.

But, so far I have no luck in sorting them. My table seems doesn't take effect at all.

Thanks before.

one glaring issue is can't append rows to ``. What testing have you done inside the sort function? — charlietfl, May 13 '15 at 21:15
charlietf, u absolutely right. I removed the tr and append to the body which is suppose to be in the first place, and it works now. $('#dp_content_table > tbody'). Thanks buddy — yodann, May 13 '15 at 21:24

score 0 · Answer 1 · edited May 23 '17 at 11:58

You can compare dates in jquery. Maybe it may help you.

https://stackoverflow.com/a/18913695/3617531

Anyway, in your code, you are using split, and then you are doing a string comparison, not a number one. You maybe should convert them to integers:

            var items = $('#dp_content_table > tbody > tr').sort(function(a, b) {
                var vA = $(a).attr('id');
                var vB = $(b).attr('id');

                var arrA = vA.split('_');
                var arrB = vB.split('_');

                return (parseInt(arrA[1]) < parseInt(arrB[1])) ? -1 : (parseInt(arrA[1]) > parseInt(arrB[1])) ? 1 : (parseInt(arrA[1]) == parseInt(arrB[1]) && parseInt(arrA[5]) < parseInt(arrB[5])) ? -1 : (parseInt(arrA[1]) == parseInt(arrB[1]) && parseInt(arrA[5]) > parseInt(arrB[5])) ? 1 : 0;
            });

                $('#dp_content_table > tbody > tr').append(items);

Alejandro, charlietfl has spotted me the error, but also good point on yours, I've added the parseInt to my code. — yodann, May 13 '15 at 21:25

RobG · Answer 2 · 2015-05-16T23:55:45.320

jQuery's sort is the built–in Array.prototype.sort, the values passed to it are the DOM elements returned by the selector, so very much more efficient to replace $(a).attr('id') with a.id. And much less to type as well.

If the IDs are ISO 8601 format date strings, they can be sorted as strings without converting to numbers or dates:

<table>
  <tr id="2015-05-16T10:00:00.000Z">
   <td>2015-05-16T10:00:00.000Z
  <tr id="2015-05-16T09:00:00.000Z">
   <td>2015-05-16T09:00:00.000Z
  <tr id="2015-05-16T11:00:00.000Z">
   <td>2015-05-16T11:00:00.000Z
<table>

<script>
(function() {
  var rows = $('tr').sort(function(a, b){
    return a.id < b.id ? -1 : a.id > b.id? 1 : 0;
  })

  $('table > tbody').append(rows);
}());
</script>

However, the id really shouldn't be used like that, much better to have the values in a data* attribute as you may wish to have identical values.

Edit

Add link to jsperf.

Sort table row with jquery

2 Answers2

Edit