From the course: Design the Web: Creating a Sortable Table

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Highlighting the sorted column

Highlighting the sorted column

From the course: Design the Web: Creating a Sortable Table

Start my 1-month free trial Buy for my team

Highlighting the sorted column

“

- [Voiceover] Now we're going to work on some user feedback. We want to highlight the table header cell that represents the column that the data is being sorted against. Now when we assign the table sorter function to our table, what the plugin does is goes through the table header elements and it finds every one of the th element and adds header class and either a headerSortDown or headerSortUp class, depending on the direction of the sort. Now while the header class will always be injected, we can customize the additional classes that are added. So back in our JavaScript file, we're going to add two additional options into the table sorter function. So after the sortList option, let's add a comma, next line, we're going to add another option called css ascending, so that's css, and then a capital Asc, add in our colon and then a space. Now we're going to add in two tick marks for a string. Now, since classes are just strings in HTML, what we can do here is add a space and actually…

Contents