This gets almost everything done, including Paging, but not search.

admin/handlers.go

@@ -112,6 +112,7 @@ func DeleteApi(c *fiber.Ctx) error {
 }
 
 func Setup(app *fiber.App) {
+  app.Get("/admin/table/", Page("admin/table/index"))
   app.Get("/api/admin/table/", GetApiTableIndex)
 
   app.Get("/api/admin/table/:table/", GetApiSelectAll)

pages/admin/table/index.html

@@ -1,19 +0,0 @@
-<script>
-  let Rows = new GetJson("/api/admin/table/")
-  console.log("Rows", Rows)
-</script>
-
-<blockstart>
-<h1>Admin Rows</h1>
-
-<block x-data="Rows">
-  <ul>
-    <template x-for="item in theData">
-    <li><a x-bind:href="'/admin/table/' + item + '/'">
-        <span x-text="item"></span>
-      </a></li>
-    </template>
-  </ul>
-</block>
-
-</blockstart>

static/js/code.js

@@ -1,20 +1,46 @@
-class GetJson {
+class PaginateTable {
   constructor(url) {
-    this.url = url;
+    this.page = 0;
     this.items = [];
-    this.item = undefined;
+    this.url = url;
+    this.headers = [];
   }
 
-  async theData() {
-    const resp = await fetch(this.url);
+  async contents() {
+    if(this.page < 0) this.page = 0;
+
+    const resp = await fetch(`${this.url}?page=${this.page}`);
     console.assert(resp.status == 200, "failed to get it");
+
     this.items = await resp.json();
+
+    this.headers = Object.keys(this.items[0]);
+
     return this.items;
   }
+}
+
+class GetJson {
+  constructor(url) {
+    this.item;
+    this.url = url;
+  }
 
-  async oneThing() {
-    this.item = await this.theData();
-    console.log("ITEMS", this.items);
+  async item() {
+    const resp = await fetch(`${this.url}`);
+    console.assert(resp.status == 200, "failed to get it");
+
+    this.item = await resp.json();
     return this.item;
   }
 }
+
+const ConfirmDelete = async (table, obj_id) => {
+  if(confirm("Are you sure?")) {
+    await fetch("/api/admin/table/" + table + "/" + obj_id + "/",
+      { method: "DELETE" });
+    window.location = "/admin/table/" + table + "/";
+  } else {
+    return false;
+  }
+}

views/admin/table/contents.html

@@ -1,18 +1,11 @@
 <script>
-  let page = 0;
-  let Tables = new GetJson(`/api/admin/table/{{ .Table }}/?page=${page}`);
-
-  const newPage = (new_page_num) => {
-    console.log("the function");
-    page = new_page_num;
-    new GetJson(`/api/admin/table/{{ .Table }}/?page=${page}`);
-  }
+  let thePage = new PaginateTable("/api/admin/table/{{ .Table }}/");
 </script>
 
 <blockstart>
 <h1><a href="/admin/table/">&laquo;</a> Admin {{ .Table }}</h1>
 
-<block x-data="Tables" x-effect="newPage(page)">
+<block x-data="thePage">
   <block class="horizontal">
     <button type="button"><a href="/admin/new/table/{{ .Table }}/">New</a></button>
     <button type="button" @click="page -= 1">Prev</button>
@@ -21,7 +14,13 @@
     <button type="button">Search</button>
   </block>
   <table>
-    <template x-for="item in theData">
+    <tr>
+      <th>#</th>
+      <template x-for="header in headers">
+        <th x-text="header"></th>
+      </template>
+    </tr>
+    <template x-for="item in contents">
         <tr>
           <td>
             <a x-bind:href="'/admin/table/{{ .Table }}/' + item.id + '/'">

views/admin/table/index.html

@@ -1,17 +1,20 @@
-<blockstart>
-
-<h1>{{ .TableName }} </h1>
+<script>
+  let Data = new PaginateTable("/api/admin/table/")
+</script>
 
-<block>
-<table>
-  <tr><th>ID</th></tr>
+<blockstart>
+<h1>Admin Rows</h1>
 
-  {{ range $index, $row := .Table }}
-    <tr>
-      <td>{{ $row }}</td>
-    </tr>
-  {{ end }}
-</table>
+<block x-data="Data">
+  <ul>
+    <template x-for="item in contents">
+      <li>
+        <a x-bind:href="`/admin/table/${item}`">
+          <span x-text="item"></span>
+        </a>
+      </li>
+    </template>
+  </ul>
 </block>
 
 </blockstart>

views/admin/table/new.html

@@ -3,12 +3,12 @@
 </script>
 
 <blockstart>
-<h1>Admin Tables</h1>
+<h1><a href="/admin/table/{{ .Table }}/">&laquo;</a>Admin {{ .Table }}</h1>
 
-<block x-init="item = await Data.oneThing()" x-data="{item: {}}">
+<block x-data="Data">
   <form method="POST" action="/api/admin/new/table/{{ .Table }}/">
     <card>
-    <top><h2>{{ .Table }} : New</h2></top>
+    <top><h2>New {{ .Table }}</h2></top>
     <middle>
       <template x-for="(value, key) in item">
         <div>

views/admin/table/view.html

@@ -1,22 +1,11 @@
 <script>
   let Data = new GetJson("/api/admin/table/{{ .Table }}/{{ .Id }}/");
-
-  const ConfirmDelete = async (table, obj_id) => {
-    if(confirm("Are you sure?")) {
-      await fetch("/api/admin/table/" + table + "/" + obj_id + "/",
-        { method: "DELETE" });
-      window.location = "/admin/table/" + table + "/";
-    } else {
-      console.log("NOOOOO");
-      return false;
-    }
-  }
 </script>
 
 <blockstart>
-<h1>Admin Tables</h1>
+<h1><a href="/admin/table/{{ .Table }}/">&laquo;</a>Admin {{ .Table }}</h1>
 
-<block x-init="item = await Data.oneThing()" x-data="{item: {}}">
+<block x-data="Data">
   <form method="POST" action="/api/admin/table/{{ .Table }}/{{ .Id }}/">
     <card>
     <top><h1>{{ .Table }} : {{ .Id }}</h1></top>