Custom sort HTML Table using javascript function

Question

I am following the answer given by @charlietfl on Custom table sort using jquery or Javascript.

The table does not seem to be sorting for me.

My code:

var custom_sort =['ABC','MNO','XYZ'];

var $rows = $('tr:gt(0)').detach().sort(function(a, b){
  var aSrcIdx =custom_sort.indexOf( $(a).find('td:last').text());
  var bSrcIdx = custom_sort.indexOf( $(b).find('td:last').text());

  return aSrcIdx >  bSrcIdx;

});
    
$('#mytable').append($rows);

table, td, th { border: 1px solid black; }

#mytable { 
    width: 100%;
    border-collapse: collapse; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id='mytable'>
   <tr>
      <th>ID</th>
      <th>Date</th>
      <th>Source</th>
  </tr>
  <tr>
      <td>50</td>
      <td>2012-01-01</td>
      <td>XYZ</td>
  </tr>
  <tr>
      <td>80</td>
      <td>2011-07-08</td>
      <td>ABC</td>
  </tr>
  <tr>
      <td>94</td>
      <td>2013-06-05</td>
      <td>MNO</td>
  </tr>
  <tr>
      <td>50</td>
      <td>2012-01-01</td>
      <td>MNO</td>
  </tr>
  <tr>
      <td>50</td>
      <td>2012-01-01</td>
      <td>XYZ</td>
  </tr>
  <tr>
      <td>75</td>
      <td>2012-01-01</td>
      <td>ABC</td>
  </tr>
</table>

As you see the I want to be able to rows in the order of ABC,MNO,XYZ,ABC,MNO,XYZ

Why isn't the code working?

How do I custom sort my table to look like:

ID	Date	Source
80	2011-07-08	ABC
94	2013-06-05	MNO
50	2013-06-05	XYZ
75	2012-01-01	ABC
50	2012-01-01	MNO
50	2012-01-01	XYZ

Use some library, it's a too common issue to have to write it from scratch. — Eugene
– Eugene, Commented May 13, 2021 at 19:55

Rocky Sims · Accepted Answer · 2021-05-13 20:35:50Z

1

const customSort = ['ABC','MNO','XYZ'];

const rows = [...$('tr:gt(0)').detach()];
const iMax = rows.length * customSort.length;
const sortedRows = [];
for (let i = 0; i < iMax; i++) {
  const targetValue = customSort[i % customSort.length];
  const targetRowIndex = rows.findIndex(row => {
    return $(row).find('td:last').text() === targetValue;
  });
  if (targetRowIndex !== -1) {
    const targetRow = rows.splice(targetRowIndex, 1)[0];
    sortedRows.push(targetRow);
  }
}
sortedRows.push(...rows);

$('#mytable').append(sortedRows);

table, td, th { border: 1px solid black; }

#mytable { 
    width: 100%;
    border-collapse: collapse; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id='mytable'>
   <tr>
      <th>ID</th>
      <th>Date</th>
      <th>Source</th>
  </tr>
  <tr>
      <td>50</td>
      <td>2012-01-01</td>
      <td>XYZ</td>
  </tr>
  <tr>
      <td>80</td>
      <td>2011-07-08</td>
      <td>ABC</td>
  </tr>
  <tr>
      <td>94</td>
      <td>2013-06-05</td>
      <td>MNO</td>
  </tr>
  <tr>
      <td>50</td>
      <td>2012-01-01</td>
      <td>MNO</td>
  </tr>
  <tr>
      <td>50</td>
      <td>2012-01-01</td>
      <td>XYZ</td>
  </tr>
  <tr>
      <td>75</td>
      <td>2012-01-01</td>
      <td>ABC</td>
  </tr>
</table>

edited May 13, 2021 at 20:35

answered May 13, 2021 at 19:58

Rocky Sims

3,6181 gold badge17 silver badges20 bronze badges

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

2 Comments

nb_nb_nb Over a year ago

Thank you for replying. Is there any way for the order to be ABC,MNO,XYZ,ABC,MNO,XYZ?

Rocky Sims Over a year ago

I've updated my answer. It should do what you want now.

Nisanth Reddy · Accepted Answer · 2021-05-13 20:02:39Z

0

All you had to change was return aSrcIdx - bSrcIdx;.

Since you need to return -1, 0, 1 from the comparator function, not boolean.

var custom_sort =['ABC','MNO','XYZ'];

var $rows = $('tr:gt(0)').detach().sort(function(a, b){
  var aSrcIdx =custom_sort.indexOf( $(a).find('td:last').text());
  var bSrcIdx = custom_sort.indexOf( $(b).find('td:last').text());

  return aSrcIdx -  bSrcIdx;

});
    
$('#mytable').append($rows);

table, td, th { border: 1px solid black; }

#mytable { 
    width: 100%;
    border-collapse: collapse; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id='mytable'>
   <tr>
      <th>ID</th>
      <th>Date</th>
      <th>Source</th>
  </tr>
  <tr>
      <td>50</td>
      <td>2012-01-01</td>
      <td>XYZ</td>
  </tr>
  <tr>
      <td>80</td>
      <td>2011-07-08</td>
      <td>ABC</td>
  </tr>
  <tr>
      <td>94</td>
      <td>2013-06-05</td>
      <td>MNO</td>
  </tr>
  <tr>
      <td>50</td>
      <td>2012-01-01</td>
      <td>MNO</td>
  </tr>
  <tr>
      <td>50</td>
      <td>2012-01-01</td>
      <td>XYZ</td>
  </tr>
  <tr>
      <td>75</td>
      <td>2012-01-01</td>
      <td>ABC</td>
  </tr>
</table>

answered May 13, 2021 at 20:02

Nisanth Reddy

6,4801 gold badge16 silver badges31 bronze badges

3 Comments

nb_nb_nb Over a year ago

Thank you for replying. Is there any way for the order to be ABC,MNO,XYZ,ABC,MNO,XYZ? –

Nisanth Reddy Over a year ago

Does that column contain only 3 possible values ?

nb_nb_nb Over a year ago

Yes, it will only contain those 3 possible values

Collectives™ on Stack Overflow

Custom sort HTML Table using javascript function

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related