Dynamic multicolumn sorting using fnPreDrawCallback - sorting

Question

I have a table with 3 columns and when I sort column 1 or 2 then I would like to sort column 3 by descending.
I'm using fnPreDrawCallback (I tried to use fnDrawCallback too).
Here is my code:
"fnPreDrawCallback": function (oSettings) {
var column = oSettings.aaSorting[0][0];
if (column !== 3) {
oSettings.aaSorting.push([3, "desc"]);
}
}
This code looks fine, but, for example, when I sort column 1, the column 3 isn't sorted and, more awkward, when I try to sort at a 2nd time on column 1, the sort result is always ascending.
How can I achieve this?

Answer 1

The data has already been "sorted" by the time the preDrawCallback is fired, so changing aaSorting in here won't change the outcome of the table.
You can verify by checking oSettings. There is aiDisplay and aiDisplayMaster properties. aiDisplay is an ordered array of the elements that changes as they are sorted from clicks on a th. aiDisplayMaster is the original order that the data came back from the server or was existing on the page.
I would recommend manually calling fnSort from the click event of your th elements. To do this you will have to unbind the click event that datatables installs.
Create a function like this and call it from fnInitComplete so it only runs after datatables has been setup.
function unbindDTSorting() {
//unbind sort event, prevent sorting when header is clicked
$j('[id$=table] th').unbind('click.DT');
//create your own click handler for the header
$j('[id$=table] th').click(function(e) {
var oTable = $j('[id$=table]').dataTable();
//here is where you can do all of your if/else logic to create the desired multidimensional sorting
if(this.cellIndex == 3){
oTable.fnSort( [ [2, 'asc'],[3,'desc' ]] );
}
});
}