p:datatable 在 ajax 刷新后丢失排序列和顺序 [英] p:datatable loses sort column and order after ajax refresh

问题描述

我在页面上有一个按钮，可以通过 AJAX 请求刷新我的数据表.像这样:

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.

理想情况下，我希望组件在视图状态中保持其排序顺序，然后在 AJAX 请求期间提交正确的参数(以便正确定义排序).我错过了一个参数还是什么?其他人有这个问题吗?

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?

推荐答案

我为@truemmer 的解决方案编写了一个扩展.他将排序顺序恢复为默认值，而我的将恢复为用户选择的先前排序.

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);
}

更新与 truemmer 相同的表格，如下所示:

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

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

Primefaces 4.0 MultiSort 支持

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);
}

这篇关于p:datatable 在 ajax 刷新后丢失排序列和顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！