Loading...
 
Skip to main content
Page actions
Get a short URL Open in WebDAV

Infinite scroll


Infinite scroll allows fetching and displaying data sequentially as the user scrolls down to the end of the container. A container can be a table, a list, a flex box, etc. This is an alternative to using pagination links.

How to use

  1. The feature element-plus must be enabled, therefore the preference elementplus_infinite_scroll enabled as well. Note that this will not be effective for tables using the jQuery table sorter feature.
  2. After activating all required preferences, all lists with pagination will no longer display a pagination module, instead opting for a scrollable container. i.e, the following image:


Another way of using it is within a wiki page, typically with a PluginHTML.

Use within a wiki page.

Sample markup:

Copy to clipboard
<el-infinite-scroll container-id="container" target-container-id="sub-container" offset="0" step="20" total-count="100"></el-infinite-scroll>


Basically, we get a new HTML tag "el-infinite-scroll", which can take some attributes:

AttributeDescriptionRequiredDefault value
container-idThe id of the element present in the DOM, containing scrollable itemsTrue-
target-container-idThe id of the sub-element of the container, containing directly scrollable items. This attribute is mostly relevant for tables, in which case the id should reference the tbody element.False-
offsetThe number specifying the starting index of elements to be displayed in the total setFalse0
stepThe number of elements to fetch on the next scrollTrue-
total-countThe number specifying the length of elements available to the serverTrue-
offset-argA string specifying which url parameter will hold the offset value when a request is made to the serverFalseoffset

Please Note:

  • The element referenced container-id and targer-container-id must be present in the DOM before using the infinite-scroll wrapper.
  • The infinite-scroll wrapper does not fetch initial items, so these must be present in the rendered container; otherwise, scrolling will not be possible with no items rendered.
  • When fetching more items, the current window URL is used with appropriate route parameters.
Comments
Slideshow