Sort rows based in ascending order using jQuery

Question

This code works but checks only the first column. I want to check the 2nd column instead with the points. How do I alter it?

HTML Table:

<table width="100%">
    <thead>
        <tr>
            <th width="60%">Name</th>
            <th width="20%">School</th>
            <th width="20%">Points</th>
        </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="4"><h1>Event 1</h1></td>
          <td>School1</td>
          <td>74</td>
      </tr>
       <tr>
          <td>School2</td>
           <td>69</td>
       </tr>
      <tr>
          <td>School3</td>
           <td>71</td>
      </tr>
      <tr>
          <td>School4</td>
           <td>11</td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td rowspan="4"><h1>Event 2</h1></td>
          <td>School1</td>
          <td>34</td>
      </tr>
       <tr>
          <td>School5</td>
           <td>29</td>
       </tr>
      <tr>
          <td>School3</td>
           <td>62</td>
      </tr>
      <tr>
          <td>School7</td>
           <td>15</td>
      </tr>
   </tbody>
</table>

jQuery:

 var $tbody = $('#caltbl tbody');
            $tbody.find('tr').sort(function (a, b) {
                var tda = $(a).find('td:eq(0)').text();
                var tdb = $(b).find('td:eq(0)').text();
                // if a < b return 1
                return tda > tdb ? 1
                       // else if a > b return -1
                       : tda < tdb ? -1
                       // else they are equal - return 0    
                       : 0;
            }).appendTo($tbody);

How do I got about this?

JSFIDDLE

EDIT: I'm sorry guys but my live code is different with rowspan being used. Is there a possibility to have this in ascending order so that the events are sorted differently?

Change :eq(0) to :eq(1)? (The number is the zero-based index of the column...) — nnnnnn
– nnnnnn, Commented Aug 23, 2016 at 6:42

Mayank Pandeyz · Accepted Answer · 2016-08-23 06:43:28Z

2

eq(0) means you are using the first index. Change it to eq(1) so that it can consider the second index.

var tda = $(a).find('td:eq(1)').text();
var tdb = $(b).find('td:eq(1)').text();

answered Aug 23, 2016 at 6:43

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Elaine Byene Over a year ago

Thank you. However, My live code is different and isn't working. Could you help? I want to sort for different events like Event 1 to be sorted differently and Event 2 to be sorted differently. Thank you so much. Check the updated JSFIDDLE

Chiu · Accepted Answer · 2016-08-23 07:48:33Z

1

You can sort the trs. Detach the td and insert to an array. Then append them back to each row

Add some class to simplify coding.

JSFIDDLE

HTML

 <table width="100%">
    <thead>
        <tr>
            <th width="60%">Name</th>
            <th width="20%">School</th>
            <th width="20%">Points</th>
        </tr>
    </thead>
    <tbody>
      <tr class="event1">
        <td rowspan="4"><h1>Event 1</h1></td>
          <td>School1</td>
          <td class="point">74</td>
      </tr>
       <tr class="event1">
          <td>School2</td>
           <td class="point">69</td>
       </tr>
      <tr class="event1">
          <td>School3</td>
           <td class="point">71</td>
      </tr>
      <tr class="event1">
          <td>School4</td>
           <td class="point">11</td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td rowspan="4"><h1>Event 2</h1></td>
          <td>School1</td>
          <td>34</td>
      </tr>
       <tr>
          <td>School5</td>
           <td>29</td>
       </tr>
      <tr>
          <td>School3</td>
           <td>62</td>
      </tr>
      <tr>
          <td>School7</td>
           <td>15</td>
      </tr>
   </tbody>
</table>

JavaScript

var $tbody = $(' tbody');
var array = [];
$tbody.find('.event1').sort(function (a, b) {
    var tda = $(a).find('.point').text();
    var tdb = $(b).find('.point').text();
    return tda - tdb;
}).each(function (idx, tr) {
  array.push($(tr).children('td').not('[rowspan]').detach());
});
$.each(array, function (idx, obj) {
    $(obj).appendTo($('.event1:eq(' + idx + ')'));
});

The JavaScript only applies to event1. You can simply modify it for arbitrary events.

Change the index as Mayank Pandey said. And..

Since your second column is number, you can just return their difference.

var $tbody = $('#caltbl tbody');
$tbody.find('tr').sort(function (a, b) {
    var tda = parseInt($(a).find('td:eq(1)').text(), 10); // always use the base number
    var tdb = parseInt($(b).find('td:eq(1)').text(), 10);
    return tda - tdb;
}).appendTo($tbody);

edited Aug 23, 2016 at 7:48

answered Aug 23, 2016 at 6:49

Chiu

3504 silver badges14 bronze badges

4 Comments

Elaine Byene Over a year ago

Even better :) however, my live code is different and isn't working. Could you help please. I want to do the sorting for different events like Event 1 to be sorted differently and Event 2 to be sorted differently. How do I go about making the changes? Check the updated JSFIDDLE

Elaine Byene Over a year ago

Thank you. However, I have over 50 such events and Copying and pasting for every event is far fetch! :( How can we solve this problem?

Chiu Over a year ago

You can iterate over events. It can be achieved by simply using a for loop. I've updated the JSFIDDLE for you. The point is to add appropriate event class and point class to the DOM.

Elaine Byene Over a year ago

Thank You so much! This is so awesome :)

Collectives™ on Stack Overflow

Sort rows based in ascending order using jQuery

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related