Change column header class

Adrian2007

Hello,
I would like to know how to change the column header class when I click on its header. I use DataTables 1.9 with "bSort": false.
As soon as I enter the page I set the class for all header "th": $('thead th').attr("class", "sorting");
Then when I click on a th I make an ajax call and get the data to fill the datatable.
After this call I need to change the column header class ("sorting_asc" or "sorting_desc").

I can get the id of the clicked th but I don't know how to set the class.
I tried something like: ' oSettings.aoColumnDefs=arrayDef;
var arrayDef = {
"aoColumnDefs": [{"sClass": "sorting_desc", "aTargets": [i]}]
};
Thankx

Adrian2007

I answer to my own question...so, the answer to this question is: oSettings.aoColumns[i].nTh.className="sorting_desc" where "i" is the index of the clicked "th" that I found with "for" cycle by header name. I'm still testing.
This workaround has a problem: if there is a fixed column (the first one in my case) the class of the header of this column does not change.

allan

I would strongly suggest against changing anything in the settings object. It is considered to be private. Its parameters can, will and do change between versions.

Normally you should just be able to modify the class name as you would with any jQuery code - $().addClass() (etc). If you are using FixedColumns, you might need to redraw the table after doing that.

Allan

Adrian2007

Thank you, Allan !
The problem with "addClass" as you say is that it is applied to an object in the page and in my case a "th" but the "th" of the normal table (for example "$('thead th(1)')" or similar to get the first th) is not the same as for the same table with dataTables enabled, I mean my table is like this:
-first column hidden (A)
-second column fixed (so this is the first visible column) (B)
-4 (but can be more or less) normal, scrolling columns (C, D, E, F,....)

With this code

$('thead th').click(function() {
alert($(this).index());
}

I get this values:
-1 for the (B) fixed column
-0 for C
-1 for D
-2 for E
-3 for F
......

I think that any operations on the columns/rows of the DataTables should be made by using its functions/objects and not by using JQuery or other library.

If I use the table.fnSettings().aoColumns[i] I get the "normal" ids, I mean from 0 to n. But I don't know how to get the id of the clicked th directly so I use this (the code is longer but this is ok just to show you)

  var oSettings = table.fnSettings();
   var columnsList = oSettings.aoColumns;

   for (i = 0; i < columnsList.length; i ++)
            {
                    var colNameDataTable = columnsList[i].sName;
                    var colNameTable = this.innerText;

                                     if ( colNameTable ==colNameDataTable) 
                          {
                                            //this way I change exactly the clicked column
                        oSettings.aoColumns[i].nTh.className="sorting_asc";  

                      }
                                  ***
                }

So, how can I use Jquery to get the id of the clicked column header (one or more columns can be fixed) ?
I'm using DataTables 1.9

I added these two lines instead of *** :

                                     table.fnDraw();
                table.fnAdjustColumnSizing(); //without this the table width increases at every click on a header

Now everything should be ok (for now :-) ) but, however, I would like to know how to get the id of cliked header (with Jquery or with DataTables methods) and change its class.

Thank you

Adrian2007

Allan, it also works with JQuery as you said, I mean I can change the header class but, as the indexes are not the same (get with JQuery methods or DataTables methods, see above) I change the class of the wrong column.

  $('thead th').click(function() {
     $(this).addClass("sorting_asc");
  table.fnDraw();
      table.fnAdjustColumnSizing();
  }

Thank you again,
Adrian2007

allan

You need to use the DataTables API for this kind of thing if you are working with FixedColumns. column().header() specifically will give you the th element for the column's header so you can manipulate the class on that. Then when the fixed column is recloned it should pick up the new class.

Allan

Adrian2007

But column().header() is available for DataTables 1.9 ? I got an error.
Thank you

allan

No, as the documentation for column().header() states it was introduced in 1.10. Apologies for having missed the fact that you are using a legacy and unsupported version of DataTables (re-reading your post I see you do say that!).

Allan