0

The following JavaScript function hides the sort arrow (up or down) from the <p:dataTable> header whose id is discountStartDate

function removeSortableIconCSS()
{
    $('#form\\:dataTable\\:discountStartDate .ui-sortable-column-icon').css({"display":"none"});
}

$(document).ready(removeSortableIconCSS);

It turns the column header from,

enter image description here

to the following.

enter image description here

The sort arrow is removed.

After updating the <p:dataTable> using the following <p:commandButton>,

<p:remoteCommand name="updateTable" update="dataTable"/>

<p:commandButton id="btnSubmit" actionListener="#{bean.insert}" value="Save"
oncomplete="if(!args.validationFailed) {updateTable();} removeSortableIconCSS();"/>

<p:dataTable id="dataTable" var="row" value="#{discountManagedBean}"...>
    ...

    <p:column id="discountStartDate" sortBy="#{row.discountStartDate}" width="200">

    ...

    </p:column>

    ...

</p:dataTable>

however, it doesn't work even though the JavaScript function removeSortableIconCSS() is invoked on the oncomplete event of <p:commandButton> and the sort icon appears as in the first image (as soon as the AJAX request is completed and the <p:dataTable> is updated).

It is not an actual requirement. It is just a demonstration of the problem that happens somewhere else and needs to be tackled.

Tiny
  • 27,221
  • 105
  • 339
  • 599
  • I understand that it's not an actual requirement, but this particular case could be solved more easily by just overriding the style in a CSS file. – BalusC Nov 27 '13 at 18:52
  • Particularly in this case, actually, I need to override the specified class in the last element (which is ``) inside `` (that corresponds to `` header. I'm just trying to implement a custom filter that allows users to use ``). This has been solved by [this](http://stackoverflow.com/a/20224959/1391249) answer but doing so by CSS is not supported by some obscure browsers. This needs to be considered, when it is not supported by Internet explorer as mentioned in that answer. – Tiny Nov 27 '13 at 19:00
  • Is an error thrown and shown in the console or does the function just complete without hiding the arrow – Sam Nunnally Nov 27 '13 at 19:29
  • @SamNunnally : Seen on Google Chrome. It does not show any error. (**Off topic :** It however, shows a warning, "*`event.returnValue` is deprecated. Please use the standard `event.preventDefault()` instead*" but this happens through out the application which is coming from somewhere in PrimeFaces itself). – Tiny Nov 27 '13 at 19:33
  • Why don't you just remove the `sortBy` attribute of the column in the datatable? – patstuart Nov 27 '13 at 19:37
  • In case the `sortBy` removal isn't an option: if I had to hazard a guess, `$('#form\\:dataTable\\:discountStartDate .ui-sortable-column-icon')` is probably returning an empty array when the function is called via the `oncomplete` block. Perhaps you could debug why that is occurring. – patstuart Nov 27 '13 at 19:39
  • @patstuart : Then sorting is disabled which is necessary. It is just a custom **filter** and does not include custom **sorting** function anymore. – Tiny Nov 27 '13 at 19:40
  • If you need to sort the set, but don't want the user to be able to do so, then you can just sort the list on the client side. – patstuart Nov 27 '13 at 19:43
  • *server side, not client side – patstuart Nov 27 '13 at 19:49
  • I guess Primefaces does some extra work in frontend after `oncomplete`. I've put `$('.ui-sortable-column-icon').css({"display":"none"});` inside `setTimeout` and set it to few seconds. After few seconds arrows disappears again. – Kuba Nov 27 '13 at 20:11

0 Answers0