loadingio@loadingio/paginate
Fetching data with paging functionality supported:
- keep pagination state (
limit&offset) - auto fetching on scrolling or event
- stop fetching on end of data ( returned length < limit )
Usage
install dependencies (proxise and @loadingio/debounce.js) and @loadingio/paginate via npm:
npm install @loadingio/paginate proxise @loadingio/debounce.jsand include them in HTML:
<script src="path-to/debounce.js/index.min.js"></script>
<script src="path-to/proxise/index.min.js"></script>
<script src="path-to/paginate/index.min.js"></script>create a paginate object:
mypal = new paginate({
fetch: -> ld$.fetch '...' , {}, {type: \json}
})you can process fetched data directly in the fetch function:
mypal = new paginate do
fetch: ->
ld$.fetch '...' , {}, {type: \json}
.then ->
render(it)
return it /* should return the fetched list */see also sample/index.ls.
Constructor Options
limit: default 20. maximal count return per fetchoffset: default 0. offset for fetch to starthost: container that scrolls. defaultdocument.scrollingElement.pivot: element for determining if we should scroll. omitted if not provided.- when provided,
intersectionObserveris used
- when provided,
scrollDelay: default 100. debounce time (ms) before fetching after scrolled.fetchDelay: default 200. debounce time (ms) before fetching when fetch is called.fetchOnScroll: default false. when true, fetch when scrolling to the bottom ofhost.- only applicable if
hostis provided
- only applicable if
fetchOnInit: default false. should a fetch be called after init. possible values:always: fetch after bothinitandresetonce: fetch only afterinitlazy: fetch when visibility ofhostis changed to visible, andoffset= 0- false: never fetch on init
boundary: threshold of the distance tohostbottom to trigger fetch.- default 5. rounding may lead to extra px uncounted so a small default value 5 is used here.
- omitted if
fetchOnScrollis false. - larger
boundarymakes fetch triggered earlier.
fetch: required custom function to fetch data according to@loadingio/paginate's status.- when called, - use
this.limitandthis.offsetfor current position of fetch progress. - should return an Array.
@loadingio/paginateuse it to updatethis.offsetand count progress.
- when called, - use
enabled: default true. when false, fetch won't start until re-enabled bytoggle(v).
Method
reset(): reset page.fetch(): fetch data again.isEnd(): is there anything to fetch.host(node): set scrolling host. use document.scrollingElement for the webpage itself.host(pivot): set pivot element ( for detecting refreshing )toggle(v): flip enabled/disabled statue. force set to v if v(true or false) is provided.
Events
empty: fired when@loadingio/paginateconfirms that the list is empty.finish: fired when@loadingio/paginateconfirms that all items are fetched.fetch: fired when@loadingio/paginatefetch a new list of datascroll.fetch: fired when@loadingio/paginatefetch a new list of data triggered by scrolling.- can happen along with
fetchevent.
- can happen along with
fetching: fired before fetch is called.
Auto Fetching Policy
You can decide when to fetch data by yourself but @loadingio/pagination still provides some handy mechanism to watch for scrolling or intersection events for you with following 2 options:
fetchOnScroll: when set to true, this triggers fetch whenpivotbecomes visible ( if pivot is provided )- user scrolls to the bottom of
hostelement ( if pivot is not provided )- this relies on
scrollevent and related attribues such asscrollTopthus is less efficient.
- this relies on
fetchOnInit: this defines how fetch should be done initially.always: fetch called after paginate object constructed and reset everytime.once: fetch called only after paginate object constructed.lazy: fetch called only if offset = 0 andhostbecomes visible.- false: no fetch for initialization.
These are handy however may introduce inconsistency and confusion. Set both of them to false if you'd like to control how fetching is done manually.
License
MIT