Visual Alternative to Sorting

mcraig

I need some advice, direction on something. I have a very "tight" datatable in that there are many columns and some are quite small in order to fulfill some visual / real estate requirements (specifically, no left/right scrolling).

the columns and titles look great, but the default sorting places those up/down, up and down graphic arrows and they obscure text and misalign...and don't think any amount of css tweaking is going to fix that.

so I've been thinking about another row below the header of drop downs, color changing the column header cell (gradient up/down or none), making smaller arrows and aligning them on the top part of the cell...you get the idea...there are many options.

Has anyone done this? I guess my first concern is where do I attach code to manually perform the sorting via fnSort, to the column header cell? It's all quite mysteriously magical to me right now.

any direction would be helpful.

Thanks,
Mike

allan

Hi Mike,

Nice idea for solving this particular problem! I would say that the easier way of implementing your solution would be to:

1. Remove the background images from the CSS for the sorting that DataTables applies (so the classes are still applied, but there is no visual indication in that cell)

2. Add an fnDrawCallback initialisation option to your table which on every draw will basically copy the classes from the header with the DataTables sorting classes to your indicator row (you'll probably want to map them to a different name (i.e. "sorting_asc" could become "indicator_sorting_asc", just so you can target them with the required CSS selectors).

The draw callback function will then run on every draw, making sure your classes are always up-to-date.

Regards,
Allan