How to avoid infinite scrolling in Web UI and use pagination
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.
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.