How to avoid infinite scrolling in Web UI and use pagination

Rodri_ — Wed, 26 Aug 2020 06:53:28 GMT

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-paginable 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/index.html 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.

Re: How to avoid infinite scrolling in Web UI and use pagination

Rodri_ — Thu, 03 Sep 2020 06:46:05 GMT

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:

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>

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>

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.

topic How to avoid infinite scrolling in Web UI and use pagination in Nuxeo Forum

How to avoid infinite scrolling in Web UI and use pagination

Re: How to avoid infinite scrolling in Web UI and use pagination