Added HTMX paging example.

controller/pager.go

@@ -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
 	}

routes/home.go

@@ -1,22 +1,46 @@
 package routes
 
 import (
+	"fmt"
+
 	"goweb/controller"
 
 	"github.com/labstack/echo/v4"
 )
 
-type Home struct {
+type (
-	controller.Controller
+	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 {
+// fetchPosts is an mock example of fetching posts to illustrate how paging works
-	p := controller.NewPage(c)
+func (c *Home) fetchPosts(pager *controller.Pager) []Post {
-	p.Layout = "main"
+	pager.SetItems(20)
-	p.Name = "home"
+	posts := make([]Post, 20)
-	p.Data = "Hello world"
-	p.Metatags.Description = "Welcome to the homepage."
-	p.Metatags.Keywords = []string{"Go", "MVC", "Web", "Software"}
 
-	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]
 }

templates/pages/home.gohtml

@@ -1,4 +1,51 @@
 {{define "content"}}
-    Hello homepage {{upper "data"}}: {{ .Data }}
+    {{- if not (eq .HTMX.Request.Target "posts")}}
-    <p><img src="{{file "gopher.png"}}" alt="Gopher"/></p>
+        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}}