How to avoid infinite scrolling in Web UI and use pagination

[Rodri_]

Hello,

I am trying to change how results are displayed in the nuxeo Web UI, and I want to remove the infinite scroll and use navigation instead. I want to change all "nuxeo-data-table" elements.

I have found that the "nuxeo-data-table" element has a "paginable" attribute: https://www.webcomponents.org/element/nuxeo/nuxeo-ui-elements/elements/nuxeo-data-table#property-pag... However, it seems it is not working, as when I enable it, there are not pagination, and the results appear in duplicate!

I have also seen another element called "nuxeo-pagination-controls": https://www.webcomponents.org/element/nuxeo/nuxeo-ui-elements/demo/demo/nuxeo-pagination-controls/in... But I don't know how it works, and I don't know and I don't know how to "connect" it with the nuxeo-data-table element.

So, how can I remove infinite scroll and enable pagination like it was in JSF UI?

Thank you.

[Rodri_]

Hello,

I still haven't gotten it to work. I am trying to modify the nuxeo-document-content element, and the pagination is working with the page provider, but the results table behaviour is not as expected. This is what I have done:

1. I have modified the nuxeo-data-table element by adding the property paginable="true". I have also added a pagination element after the table:

<nuxeo-pagination-controls page="{{page}}" number-of-pages="[[numberOfPages]]"></nuxeo-pagination-controls>

2. I have modify the nuxeo-page-provider element adding two properties: "page" and "number-of-pages":

<nuxeo-page-provider id="nxProvider" provider="[[provider]]" page-size="[[pageSize]]" aggregations="{{aggregations}}" enrichers="[[enrichers]]" params="[[params]]" schemas="[[schemas]]" headers="[[headers]]" page="[[page]]" number-of-pages="{{numberOfPages}}" fetch-aggregates=""></nuxeo-page-provider>

3. I have defined this new properties in the Polymer script, inside the properties element (and I have added an observer to the "page" property):

page: {
	type: Number,
       value: 1,
       notify: true,
	observer: '_pageNumberChanged'
},
numberOfPages: Number,

This observer executes whenever the "page" value changes; so the ide is to refresh the results table when this value changes. For this, I have tried the following:

_pageNumberChanged: function() {
	this.$.nxTable.fetch();
},

However, when I do that, the results are appended to the nuxeo-data-table element, instead of replacing them. I also have the problem that the nuxeo-pagination-controls are hidden by default, as the element is counted as another way of displaying results (like the table, or the grid elements). How can I made it visible only with the nuxeo-data-table results?

Any help will be appreciated. Gregory Carlin

Regards.