How do I make a custom 'sort by' in HTML Table?

Question

I'm new on Stackoverflow! I came here needing some help, This community really helped me programming stuff as a beginner, And I still am one!

I wanted to know how can I sort table in a custom order such as this site:

Image1

Image2

The reason why I want like that site because I'm making a league of legends table too but with only role and rank!

How much experience do you have using javascript? You can do this in vanilla JS or with any of the popular frameworks or libraries (like jquery or react), but it's a somewhat vague question if we don't know your familiarity with JS. — Zac Anger, Jan 08 '21 at 18:34
I don't really know JS , Barely started it in high school :p — Jevro1337, Jan 08 '21 at 19:50
Then going with a solution that already exists would be best, like datatables from G.Farin's answer, or Bootstrap Table. — Zac Anger, Jan 08 '21 at 19:56

score 0 · Answer 1 · answered Jan 08 '21 at 18:35

Here's a nice example of doing so!

Do this (It's already commented really nicely):

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  /*Make a loop that will continue until
  no switching has been done:*/
  while (switching) {
    //start by saying: no switching is done:
    switching = false;
    rows = table.rows;
    /*Loop through all table rows (except the
    first, which contains table headers):*/
    for (i = 1; i < (rows.length - 1); i++) {
      //start by saying there should be no switching:
      shouldSwitch = false;
      /*Get the two elements you want to compare,
      one from current row and one from the next:*/
      x = rows[i].getElementsByTagName("TD")[0];
      y = rows[i + 1].getElementsByTagName("TD")[0];
      //check if the two rows should switch place:
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        //if so, mark as a switch and break the loop:
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /*If a switch has been marked, make the switch
      and mark that a switch has been done:*/
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

Basically switch two rows of a table based on their value until everything's done.

Also, here's a great stackoverflow answer providing an all around good answer!

score 0 · Accepted Answer · answered Jan 08 '21 at 18:35

0

You could code it from scratch using JavaScript or use a plugin like this: https://datatables.net/

answered Jan 08 '21 at 18:35

G.Farin

16
1

How do I make a custom 'sort by' in HTML Table?

2 Answers2