jquery - Selecting columns associated with a header on a dataTable -

Let me have a fixed & lt; Th & gt; , the user has been asked to highlight the & lt; Th & gt; clicks on PrimeFaces & lt; P: dataTable & gt;

The easiest way I could think was to do it with JQuery <

There, Balas Si Presented a piece of code, which I was able to edit in my use case, and I ended up with:

  $ (document) .ready (function () {$ ( '# MainForm \\: table th'). Click on (function () {var th = $ (this); var index = $ ('th', th.parents ('tr')). Index (th) ; Var column = $ ('TDi TD: Anth-child (' + (Index + 1) + '), Th.parents (' Table ')); column.addClass (' Lightweight Re ');});});   
 This code really works for me but there is one thing I can not understand.  
 As soon as  light-gray  class is added to columns, it is removed. I do not know what he has to do with the lifecycle of JSF or something about giving some information about time.  
 Then the result is finding me that the columns  blink  gray and back really fast.  
 Does anyone know why this happens?  
 
  Edit 1   
 Code> XHTML :  
  & lt; H: form id = "mainForm" & gt; & Lt; P: DataTable id = "table" value = "# {myManagedBean.items}" var = "item" sortBy = "# {item.value2}" & gt; & Lt; P: column header text = "value1" type type = "# {item.value1}" & gt; & Lt; H: output text value = "# {item.value1}" /> & Lt; / P: column & gt; & Lt; P: column header text = "value 2" typebie = "# {item.value2}" & gt; & Lt; H: output text value = "# {item.value2}" /> & Lt; / P: column & gt; & Lt; P: column headerText = "value 3" sortBy = "# {item.value3}" & gt; & Lt; H: output text value = "# {item.value3}" /> & Lt; / P: column & gt; & Lt; / P: DataTable & gt; & Lt; / H: form & gt;   
 I have created a small project to separate the problem, and the table above is the one I am using for testing.  
 And yes, whenever I click on the header to change the sorting, then an AJAX request is removed, I checked in Chrome's Debugger Network tab.  
  
 
 
  @ MQ  I came up with a solution, The last  JQuery  code looks like this:  
  $ (document) .ready (function () {function afterLoad () {Var th = $ ('.ui- Index (th); var column = $ ('tdd: anth-baby' ('datatable table. + (Index + 1) + ')', 'th.parents (' .ui-datatable ')); column.addClass (' light-gray ');} $ (' body ') .bund (' complete ajax ' , Function (E, Exhaor, Settings) {afterLoad ();}); // The table that highlights the first time later To load / load in later (); afterload ();});   
  ui-state-active  is a class that has prime criteria selected  & lt; Th & gt; , so things are a bit easier.  
 If you have any suggestions, corrections or complaints about this solution, please comment. It was all in my small knowledge of JQuery that I could come along.