Primefaces datatable sorting and filtering not working until rowSelect

datatablefilteringjsfprimefacessorting

I know that this question may be duplicated but i really can't find the solution for my issue; my Issue that datatable functionality like sorting and filtering not working unless i click on any row to show the details dialog after i close the dialog everything "sorting, filtering" is working normally and as expected.

here is my code :
Bean.java

@ViewScoped
public class HomeBean implements Serializable {

    private List<Ticket>    filteredTickets;
    private List<Ticket>    tickets;
    private Ticket          selectedTicket;
    private Ticket[]        selectedTickets;

    public HomeBean() {
        super();
    }

    @PostConstruct
    public void init() {
        getData();
    }

    private void getData() {
        TicketFacade service;
        service = TicketFacade.getInstance();
        try {
            tickets = service.selectTickets();
        } catch (Exception e) {
            logger.error(Utilities.printStackTrace(e));
        }
    }
    // setter & getters

    @PreDestroy
    public void finalize() {
        logger.debug("@PreDestroy");
    }
}

And Here is the xhtml

    <?xml version="1.0" encoding="ISO-8859-1" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui"
        xmlns:c="http://java.sun.com/jsp/jstl/core">

<f:view contentType="text/html">
    <h:head>
        <f:facet name="first">
            <meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />
            <title>Home Page</title>
        </f:facet>

        <script type="text/javascript">
            window.history.forward();
            function noBack() {
                window.history.forward();
            }
        </script>
    </h:head>

        <h:body id="body-view" onload="noBack();"
            onpageshow="if (event.persisted) noBack();" onunload="">
            <f:view locale="#{userManager.locale}">
                <h:form id="Ticket">
                    <p:dataTable var="ticket" value="#{homeBean.tickets}"
                        rowKey="#{ticket.id}" paginator="true" rows="15"
                        selection="#{homeBean.selectedTicket}" selectionMode="single"
                        filteredValue="#{homeBean.filteredTickets}" id="ticketsTable"
                        emptyMessage="#{lbl.noTicketsFound}"
                        style="margin-bottom:10px;margin-top:10px;">
                        <p:ajax event="rowSelect" update=":Ticket:display"
                            oncomplete="ticketDialog.show()" />

                        <f:facet name="header">#{lbl.listOfTickets}</f:facet>

                        <p:column headerText="#{lbl.tblId}" sortBy="#{ticket.id}"
                            filterBy="#{ticket.id}" id="id">
                            <h:outputLink value="#{edit.xhtml?id=#{ticket.id}">#{ticket.id}</h:outputLink>

                        </p:column>

                        <p:column headerText="#{lbl.tblTitle}" sortBy="#{ticket.title}"
                            filterBy="#{ticket.title}" id="title">   #{ticket.title}   
                                    </p:column>

                    </p:dataTable>

                    <p:dialog header="#{lbl.moreTicketDetails}" widgetVar="ticketDialog"
                        resizable="true" width="500" showEffect="explode"
                        hideEffect="explode" closable="true" draggable="true">

                        <h:panelGrid id="display" columns="2" cellpadding="4"
                            dir="#{lbl.dir}">
                            <h:outputText for="shortDescription"
                                value="#{lbl.shortDescription}" />
                            <h:outputText id="shortDescription"
                                value="#{homeBean.selectedTicket.shortDescription}" />

                            <h:outputText for="callCenterList" value="#{lbl.callcenters}" />
                            <h:outputText id="callCenterList"
                                value="#{homeBean.selectedCallCenters}">
                            </h:outputText>
                        </h:panelGrid>
                    </p:dialog>
                </h:form>
            </f:view>
        </h:body>
       </f:view>
    </html>

Best Solution

I have seen a similar issue on my screen some time back. When the page is not completely rendered, sort and filtering wont happen. For testing purposes, could you try removing the java scripts and try. Another way to debug is using chrome hit f12 and look at the networks tab for finding out the ajax calls. Hope this helps.

Related Question