p:datatable loses sort column and order after ajax refresh

Question

I have a button on a page that causes my data table to refresh via an AJAX request. Something like this:

<h:form id="datatable">
<p:dataTable/>
</h:form>
<p:commandButton update=":datatable">

This is all fine an dandy except that when the table is refreshed it reverts to not sorting anything while still showing that it's sorting based on the previous value. In other words, the header is still highlighted and the arrow is still pointing in the sort direction but no sort is actually being performed. Obviously this isn't ideal.

Ideally I'd like the component to keep it's sort order in the view state and then submit the proper parameters during the AJAX request (so that the sort is correctly defined). Am I missing a parameter or something? Does anyone else have this issue?

From what I can tell when the table is expecting a sort back it posts the following options:

<componentID>_sortDir
<componentID>_sortKey
<componentID>_sorting
<componentID>_updateBody

When I refresh the form this doesn't happen. It also doesn't happen if I just refresh the table (thought I could work around things by updating the component directly). Is there a way to get the table to refresh correctly?

Answer 1

I wrote an extension to @truemmer's solution. His reverts the sorting order back to the default, where as mine will reverts to the previous sort the user selected.

function postAjaxSortTable(datatable)
{
    var selectedColumn = datatable.jq.find('.ui-state-active');
    if(selectedColumn.length <= 0)
    {
        return;
    }
    var sortorder = "ASCENDING";
    if(selectedColumn.find('.ui-icon-triangle-1-s').length > 0)
    {
        sortorder = "DESCENDING";
    }
    datatable.sort(selectedColumn, sortorder);
}

Updating the same table as truemmer's works like this:

<p:commandButton value="refresh" action="#{tableController.refreshPrices}" update="myTable" oncomplete="postAjaxSortTable(myTableWidget)" />

EDIT: Primefaces 4.0 MultiSort support

function postAjaxSortTable(datatable) {
    var selectedColumn = undefined;

    // multisort support
    if(datatable && datatable.cfg.multiSort) {
        if(datatable.sortMeta.length > 0) {
            var lastSort = datatable.sortMeta[datatable.sortMeta.length-1];
            selectedColumn = $(document.getElementById(lastSort.col));
        }
    } else {
        selectedColumn = datatable.jq.find('.ui-state-active');
    }

    // no sorting selected -> quit
    if(!selectedColumn || selectedColumn.length <= 0) {
        return;
    }

    var sortorder = selectedColumn.data('sortorder')||"DESCENDING";
    datatable.sort(selectedColumn, sortorder, datatable.cfg.multiSort);
}