Sorting a table by thead column click dsone

How to sort small to medium tables quickly? That's pretty hard. Because sorting has always performance implications. But so does DOM manipulation for a lot of elements.

So, what is better? Changing row * columns innerHTML content, or detaching and re-attaching the DOM rows in the desired order? Doing the sorting just in time, or ahead of time?

This snippet uses an AOT approach by faking a sort on all columns and saving the row's position for a column x sorting, ascending and descending. The result is saved on the tr itself as classes. If a user clicks the thead column, the algorithm checks the corresponding class on the trs, sorts the DOM row elements accordingly and (re-)attaches them to the table.

Improvements might most likely possible in how the table is changed and saving some intermediate steps. But that's perhaps for another snippet.

  Creative Commons License
Plain JavaScript Sorting Table Algorithm