Order or Sort column by specific attribute

serverFault

Hello All,

This is my first time using Datatables, and so far it has proven to be excellent, but I'm not venturing into territory a bit outside of my area of familiarity.

The "Problem"
For one of our tables, we have roughly 14 columns, and have just added a new column that displays a colored icon based on a job's labor & budget status. This column will ONLY display an icon, no other info. For example, a green icon indicates a job is on-time/budget, an orange is a job within 10% of both, and red icon indicates a job > 20% over on budget and/or time.

In my current config, each column heading has a sort button already, however since this column displays only icons, clicking it does nothing. I was wondering if I could store the deviation value in a custom attribute for the cell, then when a user clicks on that column's sort button, it uses that attribute's value to order the rows, e.g.:
<td deviation="8.25">ORANGEICON</td>

Work-around:
The only work-around I've come up with so far is to include a span inside each icon cell that has a class "hidden" applied that sets its CSS display attribute to none. Then, within that span, I output the deviation value. This DOES appear to work in my initial testing, but I was also thinking of other applications where this would be less ideal than being able to sort a column by a custom attribute as I could access the custom attribute in other JS functions as well. Here's an example of the span work-around. {$deviation_value} is the value as determined in PHP from MySQL data:
<td class='icon-col'><i class="flag-icon green-flag"></i><span class='hidden'>{$deviation_value}</span></td>

Comments:
I've tried doing some searching here and on Google, but haven't found anything I've been able to apply as a solution. Is this possible, or has anyone done anything similar? I'd still like all the other columns to remain sort-able by their cell values, so this would apply just to a single column.

allan

Hi,

You can use the data-order attribute on the td which DataTables will automatically detect and then sort on. See docs here.

Do you control the HTML for the table as well as the Javascript - can you add that property in addition to your deviation property?

Allan