Datatable - update column header format on filter event

[amaranto87]

I have a Datatable and I want to mark a column when a filter is activ on it.

I tried to use styleClass giving one of these style:

Code: Select all

	<style>
		th.filter-selected {
				background-color:aqua !important;
		}
		th.filter-unselected {
		}
	</style>

Here the xhtml code:

Code: Select all

<p:remoteCommand name="onFilter" update="mytable" />
<p:ajax event="filter" listener="#{myBean.onFilter}" oncomplete="onFilter()"/>
	 			
<p:column filterBy="#{row.nData}" headerText="MyColumn" filterMatchMode="contains" sortBy="#{row.nData}" 
	        	           styleClass="#{myBean.columnFiltered[0]}" >
	<h:outputText value="#{row.nData}" />
</p:column> 

The style is assigned when the table is created, but it doesn't change when I change his value on filter event.

How can I fix it?

Thanks

[kukeltje]

Because the headers are not updated when filtering. I don't have a quick solution at hand. There are several ways to try to solve it but all require some work. Personally I'd try to override some of the javascript of the datatable and add a styleclass when the filter is not empty.

[amaranto87]

Thank you for the suggestion.
Is there a function that update the headers of all columns? I'm looking for it but I didn't found yet.

Is this the correct approach?

Code: Select all

<script type="text/javascript">
		PF('myTable').filter = function() {
			PrimeFaces.widget.DataTable.prototype.filter.call(this);
			  <-- update function here
		}
</script>

In the datatable I use an ajax call onfilter event that update the styleClass of the filtered columns.

[kukeltje]

wouldn't that just be a jquery selector that based on the html structure of the datatable select all filters? And then depending on what a filter is (plain input, select etc) detect if it is empty or not?

[amaranto87]

No, I don't want to detect the columns filtered into the javascript function. I do that on my bean using the onFilter method. In this method I update the value of the styleClass of the filtered columns, but these changes doesn't apply. What I want to do is force the update of the column headers by extending the javascript filter function.

[amaranto87]

Can anyone help me? I'm stuck.
I would like to reproduce the behavior of the column header when click on it for sort the rows, but I don't understand how to do that in javascript.

[kukeltje]

You need to do it in javascript ...

Because the headers are not updated when filtering. I don't have a quick solution at hand. There are several ways to try to solve it but all require some work. Personally I'd try to override some of the javascript of the datatable and add a styleclass when the filter is not empty.