53 lines
1.2 KiB
Plaintext
53 lines
1.2 KiB
Plaintext
|
package clicktoload
|
||
|
|
|
||
|
|
import (
|
||
|
|
"fmt"
|
||
|
|
|
||
|
|
"examples/shared"
|
||
|
|
)
|
||
|
|
|
||
|
|
templ demo(users []user, page int) {
|
||
|
|
<table class="table"><thead>
|
||
|
|
<tr>
|
||
|
|
<td>Name</td>
|
||
|
|
<td>Email</td>
|
||
|
|
<td>ID</td>
|
||
|
|
</tr>
|
||
|
|
</thead><tbody>
|
||
|
|
@tbody(users, page)
|
||
|
|
</tbody></table>
|
||
|
|
}
|
||
|
|
|
||
|
|
templ tbody(users []user, page int) {
|
||
|
|
for _, u := range users {
|
||
|
|
<tr>
|
||
|
|
<td>{ u.name }</td>
|
||
|
|
<td>{ u.email }</td>
|
||
|
|
<td>{ u.id }</td>
|
||
|
|
</tr>
|
||
|
|
}
|
||
|
|
@replaceMe(page)
|
||
|
|
}
|
||
|
|
|
||
|
|
templ replaceMe(page int) {
|
||
|
|
<tr id="replaceMe">
|
||
|
|
<td colspan="3"><button class="button is-black" hx-get={ "/click-to-load/contacts/?page="+fmt.Sprint(page+1) } hx-target="#replaceMe" hx-swap="outerHTML">Load More Agents...</button></td>
|
||
|
|
</tr>
|
||
|
|
}
|
||
|
|
|
||
|
|
templ Index(users []user) {
|
||
|
|
@shared.Layout("Click to Load") {
|
||
|
|
<h2 class="title">Click to Load</h2>
|
||
|
|
<p>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:</p>
|
||
|
|
<pre><code class="language-html">
|
||
|
|
@shared.Raw() {
|
||
|
|
@replaceMe(1)
|
||
|
|
}
|
||
|
|
</code></pre>
|
||
|
|
<p>This row contains a button that will replace the entire row with the next page of results (which will contain a button to load the next page of results). And so on.</p>
|
||
|
|
<h2 class="title">Demo</h2>
|
||
|
|
@demo(users, 1)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|