1.7 KiB
1.7 KiB
Click to Load
Demo
Explanation
This example shows how to implement click-to-load the next page in a table of data. The crux of the demo is the final row:
<button
id="more_btn"
data-on-click="$offset=30; $limit=10; @get('/examples/click_to_load/data')"
>
Load More
</button>
This button respond with a set of fragments in a text/event-stream with the next page of results (which will contain a button to load the next page of results). And so on.
<!-- Removed styling for brevity -->
event: datastar-merge-fragments id: 129804115990544446 data: mergeMode morph data: fragment
<button
id="more_btn"
data-on-click="$offset=20; $limit=10; @get('/examples/click_to_load/data')"
>
Load More
</button>
backend.ts:201 Received event block: event: datastar-merge-fragments id:
129804153571508286 data: selector #click_to_load_rows data: mergeMode append
data: fragment
<tr id="agent_10">
<td>Agent Smith</td>
<td>void11@null.org</td>
<td class="uppercase">50698444ed39c832</td>
</tr>
backend.ts:201 Received event block: event: datastar-merge-fragments id:
129804153571512382 data: selector #click_to_load_rows data: mergeMode append
data: fragment
<tr id="agent_11">
<td>Agent Smith</td>
<td>void12@null.org</td>
<td class="uppercase">205381dc855b977a</td>
</tr>
backend.ts:201 Received event block: id: 129804153571516478 data: selector
#click_to_load_rows data: mergeMode append data: fragment
<tr id="agent_12">
<td>Agent Smith</td>
<td>void13@null.org</td>
<td class="uppercase">7ecd2e572c949f74</td>
</tr>