How to EASILY Sort HTML Tables with CSS & JavaScript - Web Development Tutorial
ฝัง
- เผยแพร่เมื่อ 15 ต.ค. 2024
- View the Code & CodePen:
dcode.domenade...
In this video tutorial I'll be demonstrating how you can use a simple bit of JavaScript to sort your HTML tables - this is super easy to do and is extendable if you'd like to add your own logic to the sorting!
Support me on Patreon:
/ dcode - with enough funding I plan to develop a website of some sort with a new developer experience!
Follow me on Twitter @dcodeyt!
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #webdev #html
![[Full Episode] The Restaurant War Thailand ศึกพ่อค้าซ่าแม่ค้าแซ่บ Episode 4 | 13 ต.ค. 67](http://i.ytimg.com/vi/h8N9tY46P-M/mqdefault.jpg)
IMPORTANT:
If working with numerics, I recommend you parse your values to the correct type before comparisons for the most accurate results. For example, using "parseInt" or "parseFloat".
This is especially important for floats, as you'll get bad results when sorting if they're represented as strings.
could you change it up in the Source Code that you linked? would really apreciate it because i can't make it work how it should.
Ok i made it work but now the name won't be sorted correctly..
@@krichter9245 you probably need to sort it differently based on the type of column, here's what I did:
if (column !== 1) {
sortedRows = rows.sort((a, b) => {
const aColText = a.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim();
const bColText = b.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim();
return aColText > bColText ? (1 * dirModifier) : (-1 * dirModifier);
})
}
else {
sortedRows = rows.sort((a, b) => {
const aColPrice = parseFloat(a.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim().replace('$', ''));
const bColPrice = parseFloat(b.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim().replace('$', ''));
return aColPrice > bColPrice ? (1 * dirModifier) : (-1 * dirModifier);
})
}if (column !== 1) {
sortedRows = rows.sort((a, b) => {
const aColText = a.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim();
const bColText = b.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim();
return aColText > bColText ? (1 * dirModifier) : (-1 * dirModifier);
})
}
else {
sortedRows = rows.sort((a, b) => {
const aColPrice = parseFloat(a.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim().replace('$', ''));
const bColPrice = parseFloat(b.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim().replace('$', ''));
return aColPrice > bColPrice ? (1 * dirModifier) : (-1 * dirModifier);
})
}
so basically I chekced to see if it was the column with numbers in it and sort differently based on that.
one month late reply idk how useful this will be to you but good luck!
@@samuelhowell5962 Thanks Dude, Take care
@@samuelhowell5962 It was really useful to me. Thank you!!
its easy when you do it, applied and it works, but wouldnt figure out myself. Thanks a lot. Will make use of it for my ajax loaded tables.
Thanks bro. A big hug from Porto (Portugal).
Thanks so much for this.! Is there a way to turn off the sorting capacity for a specific column (e.g.: the last column)?
So good, thank you. In my implentation, table are dynamically produced using AJAX calls. I linked the js at the top as if it were a CDN or something like that and it did not work. I solved it by adding the link to the js right after the script with the AJAX call, just in case someone else encounters a similar problem. Thanks again for this awesome tutorial.
Amazing!!! It helped a lot, It would be much cooler if the table heads add already the sorting icons and each time we clicked on the head cell the corresponding icon would turn to a different color, so people would know that the table is sortable. anyways 5 starts keep it up!!
*had
*stars xDD
holy shit my english
Thank you for making a complex issue to me look easy!
Thank you so very much. For this beautiful tutorial :)
thank >>>you can add toturial for multi filter table depend on html or javascript
Great code !!
I managed to solve the problem with better sorting of numbers, and add some code that can detect if the table is with numbers or letters.
please share
how can i use this without click mean , when load the page it automatically sort for first column ???
It works so beautifully! Thanks Man!
I think there's a problem with case-sensitive entries, they seem to prioritize capitalized/upper-cased letters than lower-cased ones
Very eloquent video, as usual. Just a quick question: instead of concatate .parentElement, would'nt be more effiicient to use .closes()? In that way, you don't have to previously be aware hay many levels there are from th to table. (and less code redundancy, maybe);
Thanks for this videos, btw!
great job, thx for showing!
So cool. Thank you. I got it to work with my php table as well and it works almost perfect. Sorting names, no problem, sorting numbers its a little fiddly though.
hey idk if this helps you sort the numbers
const sortedRows = rows.sort((a, b) => {
const aColText = a.querySelector(`td:nth-child(${ column + 1})`).textContent.trim();
const bColText = b.querySelector(`td:nth-child(${ column + 1})`).textContent.trim();
const aNum = parseInt(aColText);
const bNum = parseInt(bColText);
return (aNum - bNum) > 0 ? (1 * dirModifier) : (-1 * dirModifier);
});
@@michaelwang1524 Thank you so much. That totally worked. Greatly appreciated.
@@TownleyVM You know what we should totally work together if ur also building a website so we can bounce ideas off of each other.
@@michaelwang1524 I had this problem too and this sorted it, thank you! My first column is made up of strings and the rest numbers so I added an if statement to differentiate between your return code and the one used in the video.
Hello, I'm using this code and it works very well. However, when I use it on paginated tables, it will only sort the rows found on the current page. I want it to sort all the rows. Please help.
great video for a complete .js noob like me even though it didn't work for me and I don't not finde the mistake I made, so I had to copy your script from code pen... at least I tried XD Im wondering how to put the table back in the original sequence as it was before sorting without reloading the site? the tables at wikipedia for example do have this 3 states for each column - asc, desc and back to original...
Awesome work, is it possible to filter on the name column?
Would you consider doing a follow-up video on how to do this if possible please?
Very helpful reference. Thank you!
Hello! I was wondering if you could tell me, how would you edit your table to only sort one column? I imagine it would be in headerCell function. Would you edit the tableElement variable? Or would it be in the document.querySelectorAll(".table-sortable th") part? Thank you so much if you could help me with this!
Bro, you resolve my problem , thanks for that! new sub
thank you very much, the code is super functional.
Thank you! This video helped me sort my table lol
Thank you for this video. Very well done!
Thanks man for this information. Keep it up
No worries mate!
Thank you it's the best lesson that I ever seen)))))
Cheers!!
do I have a possibility not to sort the Rank? let the rank fix?
Great help and amazing explanation! The question is how can i do this beautiful sorting you did using DropDown menus and Select Tags?
Awesome video! I’m making a project and I want to do this but whit an input, so the client select the csv file and displays in the srcren
Thanks for the amazing tutorial, helped a lot!
Excellent mate. Thanks for sharing.
Awesome video! How do you make it sort selected values from a dropdown column? Thanks!!
Do I have to change anything to make this work with flask? Mine isn't working. Nothing happens =(
Amazing tutorial!
Great video but Does this work on pagination?
Thanks! I'm tired of using CSS libraries
Thanks fort this! But the code doesn't seem to work if the table is populated with AJAX?
@dcode Why is that video part of the JavaScript Classes playlist?
Thanks mate! Keep it up!
Cheers mate!
Instead of traversing DOM one by one like:
const tableElement = headerCell.parentElement.parentElement.parentElement;
It's easier just to use closest() method.
const tableElement = headerCell.closest('.table');
That's a much better solution. I've been using it in my recent videos. Thanks 😀
Hello, what if I want to work with table that requires calculations?
Thank you for this video!
Awesome, thanks
Thanks for posting this tutorial, it is fantastic! What part o the code would I change to have the first column click present the descending order?
Thanks again for great video and code. I figured it out. I set the 'asc' parameter to 'false' in the sortTableByColumn function and also named the const dirModifier = asc ? from 1 : -1 to -1 : 1
thanks it works great
I get error in declaring the constants, like: sortedRows is declared but it's value is never read. I'm all day on it trying to solve it. I'm using visual studio 2017. Help please anybody?
when i try inspect its working but its not sorting. need help please
Same problem
thanks ! very helpful
Really amazing and thanks for making this
No problem!
if i don't want to sort all the columns, what should i change please?
Did you got anything for this?
you are awesome dude
Thank you so much! :)
You're welcome, glad it could help
Great tutorial thanks!!
Can you also do a tutorial on pagination
Thanks for sharing this will help a lot for my current project , but there's a line of code that I cannot understand please see below:
return aColText > bColText ? (1 * dirModifier) : (-1 * dirModifier);
what does this code mean ? thanks !
It's using the ternary operator: developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
We want either -1 or 1, and the dirModifier flips number (-1 or 1) depending on if we are sorting ascending or descending
@@dcode-software thank you sir
How to increase size of that sort arrow
how to sort table column based on dropdown option
Thanks for the tutorial. It's great. It Just helped me in my project
If numbers are more than 10 it sorting 1 10 11 2 3 4... or 9...3 2 11 10 1 it's ok if writing 01 02 03... :)
How can I do pagination?
I followed the video and my sorting doesnt work :(
how to integrate this with mysql?
everything works for me but not the CSS i dont know why anyone having issue applying css arrows doesnot appear?
Can you do this with Vue? would be awesome
can i also sort certain categories(dates dont function)
did u get the solution?
Cheers mate 🍻
Sort by numbers only
const sortedRows = rows.sort((a, b) => {
const aColText = a.querySelector(`td:nth-child(${ column + 1})`).textContent.trim();
const bColText = b.querySelector(`td:nth-child(${ column + 1})`).textContent.trim();
const aNum = parseInt(aColText);
const bNum = parseInt(bColText);
return (aNum - bNum) > 0 ? (1 * dirModifier) : (-1 * dirModifier);
});
Clicked subs and love you
Thank you!!! :-D
How can you keep the ranking order unchanged ?
You could make use of something like Local Storage or Session Storage
I made it work with a forEach on every row to keep the index before adding to the empty table...thank you for the quick reply:D
not working in paginations
You are awesomeeeeeeeeeeeeeee!!!! thx
Great
Bro, please share code
It's there in the description
Easy. Yeah, right.
🙏🏽🙏🏽🙏🏽
Why are you using such a convoluted and complex way of getting the index of each clicked 'TH', when you can just use the 'index' argument of forEach() instead? Instead of this: const headerIndex = Array.prototype.indexOf.call(headerCell.parentElement.children, headerCell), you can just pass 'index' argument, and then assign it to headerIndex.
Hi,
Can you share full code please
This was very useful, thanks a lot!
How to pagination with it?