Sortable Table Columns with Javascript

In this video we will be using javascript to handle table sorting by column on the frontend

[jeff-creations]

Thanks for the super straight forward video Dennis, I learned a bunch. I'm going to follow along for the next few videos in the series as well! I don't really know jQuery and am really trying to learn Vanilla Javascript first. I spent some time trying to convert the jQuery you used to Javascript. I had issues getting the icons to change so I went down a different road with the icons. That said I am going to post what I have so far for those viewers that want the Javascript approach.

[isaacjpg]

Seeing the whole series ... thank you for the video

[junyuwang]

Dennis you saved the last piece missing from my hw you're god to me now

[rexorgutierrez]

How about when the data is came from the database how it should connect? please answer me

[srikannandairy]

Your tutorials are great in terms of content, clarity and pace. I am a Django developer. I have doubt whether we can check the user group in js code.

[santiagowhite]

Why do I have a problem with the click function? It does not trigger the console log

[daedalusrasmus]

There's problems with the case of the letters. Uppercase letters have precedence over lowercase ones...

[tariqshaikh]

I had fetched my data from an API and displayed it on the browser if I want to sort data on that values what changes do I need to make in place of "myArray". Thank You

[Modafinil]

How about sorting according to the date column? I think it does not work. I added a section which does the same than your code but converts a[column] and b[column] to Date objects. It seems to work after that but I'm so inexperienced with javascript that it's better not to declare the problem as solved.


Here is what I did:


if(column == 'birthdate')
{
if(order == 'desc'){
$(this).data('order', "asc")
myArray = myArray.sort((a, b) => new Date(a[column]) > new Date(b[column]) ? 1 : -1)
text += '&#9660'
}else{
$(this).data('order', "desc")
myArray = myArray.sort((a, b) => new Date(a[column]) < new Date(b[column]) ? 1 : -1)
text += '&#9650'
}
}
else
if(order == 'desc'){
$(this).data('order', "asc")
myArray = myArray.sort((a, b) => a[column] > b[column] ? 1 : -1)
text += '&#9660'
}else{
$(this).data('order', "desc")
myArray = myArray.sort((a, b) => a[column] < b[column] ? 1 : -1)
text += '&#9650'
}


However it would also be nice if one would be able to leave only the sorting triangle to the column header which is currently sorted and remove the triangles from those column headers. This could avoid users confusion but it still would be nice to indicate somehow that the column headers are providing sorting for table items. For example, Windows Explorer is providing that kind of behavior.

[GavishSethi]

good but little more explanation would have been better

[adamloewen]

I don't get it. You sort the columns, and they change, but they aren't actually ordered numerically or alphabetically. What's going on?

[Modafinil]

What if the stuff of one column you want to sort is in <a href="#">Item to be sorted</a>? Sorting should be done according to the text content. Not according to a DOM element.