Infinite Scroll
Explanation
The infinite scroll pattern provides a way to load content dynamically on user scrolling action.
Let’s focus on the final row (or the last element of your content):
<div
data-intersects="$offset=0;$limit=10;$$get('/examples/infinite_scroll/data')"
id="more_btn"
>
<div>Loading...</div>
</div>
This last element contains a listener which, when scrolled into view, will trigger a request. The result is then appended after it. The last element of the results will itself contain the listener to load the next page of results, and so on. data-intersects
is a custom attribute that triggers a request when the element is scrolled into view. The $offset
and $limit
parameters are used to control the pagination of the results. The server sents back a new more_btn
element with a new offset and the results to be appended.
event: datastar-fragment
data: selector #more_btn
data: merge morph_element
data: settle 500
data: fragment <div data-intersects="$offset=10;$limit=10;$$get('/examples/infinite_scroll/data')" id="more_btn"><div>Loading...</div></div>
event: datastar-fragment
data: selector #click_to_load_rows
data: merge append_element
data: settle: 500
data: fragment <<tr id=\"agent_60\"><td>Agent Smith 3c</td><td>void61@null.org</td><td class=\"uppercase\">39b02fcf39c047c5</td></tr>"
....More rows to be appended