Primefaces datatable custom pagination not updating

Question

I am working on an application where we have our older code base (Struts 1) and are now building out a newer code base using JSF to run alongside the rest of the (old) application. The older datatables that we have across our application show the following for pagination:

"Showing 1 to 20 of 50 entries"

I have been tasked with getting the new PF datatable to display the same way.

I was able to get this working for the first page by overriding the encodePaginatorMarkup method of the primefaces DataRenderer class. The problem comes when the page is changed - this method is not being called to update the pagination. This is confusing to me because the current page (and everything else) gets updated in the normal pagination template without this method getting called.

I looked at the AJAX response being sent back when changing pages and don't see any HTML generated for updating the pagination (only the total count). This leads me to believe that everything is being handled in JS.

The way I'm currently thinking of implementing it would be to use an f:ajax for changing the page, and in the oncomplete pass the widgetVar value for the table and have a common method that will update the pagination based on properties of that datatable in JS. This seems like overkill and I don't want to over-complicate the code if I don't have to.

Is there any better way to go about this? Does anyone have any other suggestions?

Answer 1

Well since there is no other input I went ahead and implemented it using the page event:

<p:dataTable id="users" widgetVar="userTable" paginator="true" rows="20" sortBy="userId">
    <p:ajax event="page" oncomplete="setTimeout(function() { update_pagination('userTable'); }, 0)" />

    ...
</p:dataTable>

The setTimeout was required because the JS object was still not updated when called from oncomplete - so I bumped it into the next event loop, where the values are up-to-date.

Here is the update_pagination JS function:

function update_pagination(table) {
    table = PF(table);

    var paginator = table.cfg.paginator;

    var $pageStart = $(table.jq).find('.paginator_pagestart');
    var $pageEnd = $(table.jq).find('.paginator_pageend');

    $pageStart.html(paginator.page*paginator.rows+1);
    $pageEnd.html(Math.min(paginator.rowCount, paginator.page*paginator.rows+paginator.rows));
}

I pass it the table name, grab the actual PF object and then use the paginator part of the cfg to update the current entries being shown. I use Math.min because on the last page it might not have enough data, and I didn't want it reading "Showing 1 to 20 of 7 entries", but rather "Showing 1 to 7 of 7 entries"