如何通过javascript保存和恢复primefaces datatable的过滤状态，并使用costomfilter

Question

我有一个primefaces数据表，想用selectCheckboxMenu来过滤它

<p:column filterBy="#{entity.category}" headerText="Category" filterMatchMode="in">
    <f:facet name="filter">
        <p:selectCheckboxMenu label="Category" onchange="PF('datatable').filter()">
            <f:selectItems value="#{bean.categoryOptions}"/>
        </p:selectCheckboxMenu>
    </f:facet>
    <h:outputText value="#{entity.category}" />
</p:column>

过滤器本身工作得很好。我可以过滤数据表，重新加载站点后，只有过滤后的值也在那里。

我的问题是，重新加载后，数据表的过滤器状态消失了。我看到过滤器工作，但我没有看到过滤器的值在数据表的头。

带有数据表的表单:

<h:form id="form">
    <p:dataTable var="entity" value="#{bean.list}" widgetVar="datatable" filterEvent="enter" id="datatable"
        lazy="true">
        <p:ajax event="filter" process=":form:filters"
            onstart="saveDatatableState()"></p:ajax>
        ... columns ...
    </p:dataTable>
    <h:inputHidden id="filters" value="#{bean.filters}" />
    <h:inputHidden id="page" value="#{bean.page}" />
    <h:inputHidden id="npages" value="#{bean.npages}" />
    <h:inputHidden id="scrollPos" value="#{bean.scrollPos}" />
</form>
<script src="js/DataTableFilterStorage.js" />   
<script> $(function(){ loadDatatableState(); }); </script>

过滤器值是通过javascript保存和加载的。这些方法在文件DataTableFilterStorage.js中:

function saveDatatableState(){              
    var filterNormal = $('form .ui-column-filter').serialize();
    var filterCustomText = $('form .ui-column-customfilter .ui-inputfield').serialize()
    if (filterNormal != "" && filterCustomText != "") {
        $(fFilter).val(filterNormal + '&' + filterCustomText);
    } else {
        $(fFilter).val(filterNormal + filterCustomText);
    }
    var page = $('.ui-paginator-page.ui-state-active:first').text();
    if(!page) page = 0;
    var scrollPos = $('body').scrollTop();
    if(!scrollPos) scrollPos = 0;
    $(#page).val(page);
    $(#npages).val($('#yui-pg0-0-rpp').val());
    $(#scrollPos).val(scrollPos);
}
function loadDatatableState(){ 
    var filters = $(#filters).val().split('&');    
    if (filters != ""){
        for(var i = 0; i < filters.length; i++){               
            var f = filters[i].split("=");
            if(f.length != 2 || f[1].length < 1) continue; 
            $('#'+f[0].replace(/%3A/g, '\:')).val(decodeURIComponent(f[1]).replace('+', ' '));
            //For Dropdown-Menues
            $('#'+f[0].replace(/%3A/g, '\:') + ' option:selected').val(decodeURIComponent(f[1]).replace('+', ' '));    
        }          
    }      
    var handler = function(e, xhr, settings) {
        if($(#page).val().length > 0 && $(#page).val() != 1){
            var p = $('a.ui-paginator-page[page='+$(#page).val()+']:first');
                if(p.length > 0){
                p.attr('id', 'currentPage');
                var event = document.createEvent("HTMLEvents");
                event.initEvent("click", true, true);
                document.getElementById('currentPage').dispatchEvent(event);
            }
        }
        $(#form).unbind('ajaxComplete', handler);
    };
    $(#form).ajaxComplete(handler);
};

来自普通文本字段、下拉菜单(单个选择选项)和输入掩码的过滤器值被正确保存和加载，但来自selectCheckboxMenu的过滤器值不是。

过滤器没有正确保存的原因是$(#filter).val($('form .ui-column-filter').serialize());行。它只保存类型为"ui-column-filter"的过滤器。selectCheckboxMenu中的过滤器类型为ui-column-customfilter。我试图通过将行更改为$(#filter).val($('form .ui-column-customfilter').serialize());来选择值，但它不起作用。

解决方案必须在ie11下工作。我使用的是Primefaces 5.2和JSF 2.0。

Answer 1

您可以使用在Primefaces 6.1中实现的新的multiViewState特性来持久化dataTable状态。