Change column class when order

Adrian2007

Hello,
I am new to this forum but I am using Datatables 1.9 in a project for about 4 months.

I have this problem:
In my project (java web app with Struts 1 and iBatis) I fill the Datatables grid and paginate data always server-side, I mean I call the back-end and query every time the user clicks on a page number (a page has 50 records so I always get 50 records from the query).

Now the problem is: I have to order ALL data when the user clicks on the column header, so the column header should change css class (dark-gray with arrow up/down), the query is called again and all the records are ordered by this column, and the page is reloaded. After the page is reloaded I should see the header of the clicked column in dark-gray and with arrow up/down.
I don't know how/when to set the column header class (dark-gray and arrow up/down) after the page is reloaded.
The header of this column should restore its default css class when I click on another column to order by this new column and this new column should change its class and so on.

This is the code I used to send data to the server. I pass the column name and the order type (ASC or DESC). The the "detail.do" forwards to the jsp where I have a for cycle to fill the DataTables but I don't know how to set the column class based on the order type (ASC or DESC) because when the page is reloaded the column header has always the default class.

    $('.sorting').click(function(e) {
    var oSettings = table.fnSettings();
    var colList = oSettings.aoColumns;
    var orderCol = oSettings.aaSorting;
    var arrayInfoOrd = orderCol[0];

var formOrd = document.getElementById("idFormOrd"); 
formOrd.action="detail.do";
formOrd.nameColumnOrd.value=colList[orderCol[0]].sName;
formOrd.typeOrd.value=orderCol[1];
formOrd.submit();

    });

Adrian2007

I modified like this but I still have the problem with the class for the header

$('thead th').unbind('click.DT');

$('thead th').click(function() {
var formOrd = document.getElementById("idFormOrd");
formOrd.action="detail.do";
formOrd.nameColumnOrd.value=this.innerHTML;
formOrd.typeOrd.value=orderType; //I get this value starting from ASC and then check if it's ASC then it should be DESC......
formOrd.submit();
}

Thanks

Adrian2007

I think it can be solved by disabling the sorting feature (see my question https://datatables.net/forums/discussion/34723/wrong-order-rows#latest) and create my own functions and set css classes.
However, I would like to know the opinions of the experts.
Thankx