How to Add Row Classes to Get Striped Tables With sorttable.js

— Programming

If you’ve ever explored sorting tables, you might’ve come across a nice little library called sorttable. It’s functional, lightweight, and easy to add to just about any table.

If you’ve got a table with alternating colors for the rows, this little library will mess that up for you. From the looks of the results in the bug tracker, it appears that creating a remedy to this issue is a high priority, but can be difficult depending on how the background was applied. Well, if you’ve used proper CSS, then hopefully you’re using class names to apply your alternating background colors. If that’s the case, an easy fix is to add a couple of additional lines of code to the original source.

Look for this section:

tb = this.sorttable_tbody;
for (var j=0; j<row_array.length; j++) {

This is where we’re going through our loop of sorted elements and putting them on the table. Here’s our chance to apply alternating class names so we can keep our table rows looking nice. Just add the following in the for loop:

if (j % 2 == 0) {
   row_array[j][1].className = 'class_with_bg';
} else {
   row_array[j][1].className = 'class_with_other_bg';
}

…and voila!

I hope you enjoyed this post. If you did, consider subscribing to my feed.

Related Posts