neubert neubert - 5 months ago 11
Javascript Question

adding two sort icons to a datatables column?

So let's say one of my datatable columns is something like "Vehicle Make / Model" and that the values are formatted like "Toyota
Camry".

Superficially, it'd be better if these were two columns but I have limited screen real-estate and I'd rather people scroll vertically than horizontally.

For now I've disabled sorting on the "Vehicle Make / Model" column by doing

'columnDefs': [{orderable: false, target: x}]
but what I'd like to do is to make it so that it looks more like this:

Vehicle Make ↕ / Model ↕

eg. one column with two sortable widgets within it.

The image itself is
images/sort_both.png
(or sort_asc.png or sort_desc.png) but just because the image is there doesn't make it sortable..

Any ideas?

Thanks!

Answer

You'll have to split it into two arrays to sort it separately, and since you're using datatables, you might as well do it beforehand, and get yourself two columns.

Fix the source data

If you have no control over the format of the source-data, then you're likely out of luck. Consider, where would you split the results in the following case:

Make          Model         Your Make/Model Column

Hyundai       Santa Fe      Hyundai Santa Fe
Alfa Romeo    Giulietta     Alfa Romeo Giulietta

Style the columns

Then, you can have 3 columns: Make, Model, Make/Model. Just set display:none on Make and Model, but use them for sorting.

sort on the hidden columns

var modelSortAsc = true;

$('#modelColumnLink').click(function(){
    var sort = (modelSortAsc)? "asc" : "desc";
    modelSortAsc = !modelSortAsc;
    DataTable( {
        "order": [[ 4, sort ]]
    } );
});