Added HTMX paging example.
This commit is contained in:
parent
677193ccba
commit
b29de840f9
@ -61,18 +61,18 @@ func (p *Pager) SetItems(items int) {
|
||||
}
|
||||
|
||||
// IsBeginning determines if the pager is at the beginning of the pages
|
||||
func (p *Pager) IsBeginning() bool {
|
||||
func (p Pager) IsBeginning() bool {
|
||||
return p.Page == 1
|
||||
}
|
||||
|
||||
// IsEnd determines if the pager is at the end of the pages
|
||||
func (p *Pager) IsEnd() bool {
|
||||
func (p Pager) IsEnd() bool {
|
||||
return p.Page >= p.Pages
|
||||
}
|
||||
|
||||
// GetOffset determines the offset of the results in order to get the items for
|
||||
// the current page
|
||||
func (p *Pager) GetOffset() int {
|
||||
func (p Pager) GetOffset() int {
|
||||
if p.Page == 0 {
|
||||
p.Page = 1
|
||||
}
|
||||
|
@ -1,22 +1,46 @@
|
||||
package routes
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
|
||||
"goweb/controller"
|
||||
|
||||
"github.com/labstack/echo/v4"
|
||||
)
|
||||
|
||||
type Home struct {
|
||||
type (
|
||||
Home struct {
|
||||
controller.Controller
|
||||
}
|
||||
|
||||
Post struct {
|
||||
Title string
|
||||
Body string
|
||||
}
|
||||
)
|
||||
|
||||
func (c *Home) Get(ctx echo.Context) error {
|
||||
page := controller.NewPage(ctx)
|
||||
page.Layout = "main"
|
||||
page.Name = "home"
|
||||
page.Metatags.Description = "Welcome to the homepage."
|
||||
page.Metatags.Keywords = []string{"Go", "MVC", "Web", "Software"}
|
||||
page.Pager = controller.NewPager(ctx, 4)
|
||||
page.Data = c.fetchPosts(&page.Pager)
|
||||
|
||||
return c.RenderPage(ctx, page)
|
||||
}
|
||||
|
||||
func (h *Home) Get(c echo.Context) error {
|
||||
p := controller.NewPage(c)
|
||||
p.Layout = "main"
|
||||
p.Name = "home"
|
||||
p.Data = "Hello world"
|
||||
p.Metatags.Description = "Welcome to the homepage."
|
||||
p.Metatags.Keywords = []string{"Go", "MVC", "Web", "Software"}
|
||||
// fetchPosts is an mock example of fetching posts to illustrate how paging works
|
||||
func (c *Home) fetchPosts(pager *controller.Pager) []Post {
|
||||
pager.SetItems(20)
|
||||
posts := make([]Post, 20)
|
||||
|
||||
return h.RenderPage(c, p)
|
||||
for k := range posts {
|
||||
posts[k] = Post{
|
||||
Title: fmt.Sprintf("Post example #%d", k+1),
|
||||
Body: fmt.Sprintf("Lorem ipsum example #%d ddolor sit amet, consectetur adipiscing elit. Nam elementum vulputate tristique.", k+1),
|
||||
}
|
||||
}
|
||||
return posts[pager.GetOffset() : pager.GetOffset()+pager.ItemsPerPage]
|
||||
}
|
||||
|
Binary file not shown.
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 2.0 KiB |
@ -1,4 +1,51 @@
|
||||
{{define "content"}}
|
||||
Hello homepage {{upper "data"}}: {{ .Data }}
|
||||
{{- if not (eq .HTMX.Request.Target "posts")}}
|
||||
Hello homepage
|
||||
<p><img src="{{file "gopher.png"}}" alt="Gopher"/></p>
|
||||
|
||||
<section class="section">
|
||||
<h1 class="title">Recent posts</h1>
|
||||
<h2 class="subtitle">
|
||||
Below is an example of both paging and AJAX fetching using HTMX
|
||||
</h2>
|
||||
</section>
|
||||
{{- end}}
|
||||
|
||||
{{template "posts" .}}
|
||||
{{end}}
|
||||
|
||||
{{define "posts"}}
|
||||
<div id="posts">
|
||||
{{- range .Data}}
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img src="{{file "gopher.png"}}" alt="Gopher"/>
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>{{.Title}}</strong>
|
||||
<br>
|
||||
{{.Body}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{{- end}}
|
||||
|
||||
<div class="field is-grouped is-grouped-centered">
|
||||
{{- if not $.Pager.IsBeginning}}
|
||||
<p class="control">
|
||||
<button class="button is-primary" hx-swap="outerHTML" hx-get="/?page={{sub $.Pager.Page 1}}" hx-target="#posts">Previous page</button>
|
||||
</p>
|
||||
{{- end}}
|
||||
{{- if not $.Pager.IsEnd}}
|
||||
<p class="control">
|
||||
<button class="button is-primary" hx-swap="outerHTML" hx-get="/?page={{add $.Pager.Page 1}}" hx-target="#posts">Next page</button>
|
||||
</p>
|
||||
{{- end}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
Loading…
Reference in New Issue
Block a user