Datatables Sort Arrow Functionality - sorting

Question

I am using DataTables and it is working marvelously. As it works now when you click on the column header (anywhere on the header) it sorts. And toggles between ascending and descending. But the request now is to have two distinct buttons one that would sort ascending and the other that would sort descending respectively, instead of having the whole header be the active trigger.
Do I have to append to each header and add my own buttons or is there something built into datatables that i am missing.
If i do have to add my own buttons, i'd love being pointed in the right direction.
Thanks a million!

Answer 1

well if the point here is just change the default icons for sorting you can just overwrite this classes
.sorting_asc {
background: url("my_custom_image_asc") no-repeat scroll right center transparent;
}
.sorting_desc {
background: url("my_custom_image_desc") no-repeat scroll right center transparent;
}

Answer 2

Unfortunately there is no builtin functionality for this in jquery dataTables. But it is very easy to implement. Here are the steps :
1) Remove the default header icons, in 1.10.x use this CSS
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
background: none;
}
2) Remove white-space wordwrap and ugly outlines as well
th {
white-space: nowrap;
outline: none;
}
3) Create a class that style the buttons
.sort-btn {
padding: 0px;
float: right;
font-size: 10px;
}
4) After you have initialised the dataTable, cycle through the <th>'s. For each, unbind the default click event, add .asc and .desc buttons, and inject events for ordering the column ascending or descending for each button :
$('#example th').each(function(index, th) {
$(th).unbind('click');
$(th).append('<button class="sort-btn btn-asc">▲</button>');
$(th).append('<button class="sort-btn btn-desc">▼</button>');
$(th).find('.btn-asc').click(function() {
table.column(index).order('asc').draw();
});
$(th).find('.btn-desc').click(function() {
table.column(index).order('desc').draw();
});
});
5) The result looks like this :
demo -> http://jsfiddle.net/wyLzgjv5/