Sortable Table Columns with Javascript

In this video we will be using javascript to handle table sorting by column on the frontend
Follow me on Twitter: / dennisivy11
LinkedIn: / dennis-ivanov
Source Code & Live Demo: github.com/div...

[@junyuwang536]

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

[@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.

[@rexorgutierrez4063]

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

[@adamloewen9717]

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?

[@apughose3060]

I faced the same problem. Then, I figured it out.
Player ▲
data-colname should be exactly like the property name:
var myArray = [{"Playername":"Joe Banyard","Team":"JAX"},{"Playername":"Shaun Hill","Team":"MIN"}]

[@adamloewen9717]

@@apughose3060 I put in my own custom sort functions. I found that the stock algorithm works for alphas, you can use a really basic sort for floats and integers, and then I also had to think critically about custom situations where I actually wanted it to sort by only a part of the value string, or I wanted to axe a percent sign and multiply by 100, etc. btw I don't remember which script this is about. I ditched table-sorter.js for bootstrap-table.js, and would do the same again. My project displays tons of huge tables, and so far bootstrap-table does most of what is needed. You can dig around in the extensions for some real creative stuff.

[@apughose3060]

I would love to see your solution. Please share the url (if you like to share)

[@adamloewen9717]

@@apughose3060 I think it's all built in already. You enter in the th tags the usual "data-sort='true'' etc, but add 'data-sorter=function(foo)', add a script in the head, and you can declare the sort function right there. So, I make function percentageSorter() {} and in there, if you don't know what to do, google sort functions. It's a common theme in programming, so you should be able to get the idea from there, and customize to heart's content. (can't share work stuff directly unfortunately).

[@isaacjpg]

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

[@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.

[@naishadhchawra7508]

thanks man . Finally got this .

[@santiagowhite5467]

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

[@ketz555]

11:20 The date sort doesn't work

[@EIGatito]

What the solution of it? Plzzzz

[@marygracetecson7148]

@@EIGatito date should be in yyyy/mm/dd format

[@tariqshaikh459]

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

[@saiganeshn8588]

Did you figure that out bro I am also having that doubt

[@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 += '▼'
}else{
$(this).data('order', "desc")
myArray = myArray.sort((a,b) => new Date(a[column]) < new Date(b[column]) ? 1 : -1)
text += '▲'
}
}
else
if(order == 'desc'){
$(this).data('order', "asc")
myArray = myArray.sort((a,b) => a[column] > b[column] ? 1 : -1)
text += '▼'
}else{
$(this).data('order', "desc")
myArray = myArray.sort((a,b) => a[column] < b[column] ? 1 : -1)
text += '▲'
}
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.

[@anabellegutkowski4212]

You can turn Date into a timestamp too. Then do the sorting.

[@cengiz-ilhan]

thanks

[@daedalusrasmus3278]

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

[@GavishSethi]

good but little more explanation would have been better

[@Modafinil]

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

[@Modafinil]

tableData = tableData.sort((a, b) => $("").html(a[column]).text() > $("").html(b[column]).text() ? 1 : -1);