Still trying to work on fixing the pager issues.

crudkit/html/templates/crudkit/_macros.html

@@ -20,9 +20,9 @@
 
 {% macro rows(items, fields, getp=None) -%}
 {%- for obj in items -%}
-<tr id="row-{{ obj.id }}">
+<tr id="row-{{ obj.id }}" style="cursor: pointer;">
     {%- for f in fields -%}
-    <td data-field="{{ f }}">{{ getp(obj, f) }}</td>
+    <td data-field="{{ f }}" class="text-nowrap">{{ getp(obj, f) if getp(obj, f) is not none else '-' }}</td>
     {%- endfor -%}
 </tr>
 {%- else -%}
@@ -55,12 +55,13 @@
         {% endif %}
 </nav>
 #}
-<nav id="pager">
+<nav class="mt-3">
     <ul class="pagination justify-content-center bg-white">
         <li class="page-item {%- if page <= 1 %} disabled{% endif %}">
             <a class="page-link"
                 hx-get="/ui/{{ model }}/frag/rows?page={{ page - 1 }}&per_page={{ per_page }}{% if sort %}&sort={{ sort }}{% endif %}{% if fields_csv %}&fields_csv={{ fields_csv|urlencode }}{% endif %}{% for k,v in filters.items() %}&{{k}}={{ v|urlencode }}{% endfor %}"
-            hx-target="#rows" hx-swap="innerHTML" {%- if page <= 1 %} hx-disable{% endif %}>Prev</a>
+                hx-target="#rows" hx-swap="innerHTML" {%- if page <=1 %} hx-disable{% endif %}
+                hx-on:click="document.querySelector('#pager-state input[name=page]').value='{{ max(1, page-1) }}'">Prev</a>
         </li>
         <li class="page-item {%- if page <= 1 %} disabled{% endif %}">
             <a class="page-link"
@@ -82,7 +83,6 @@
                 hx-target="#rows" hx-swap="innerHTML" {%- if page>= pages %} hx-disable{% endif %}>Next</a>
         </li>
     </ul>
-    <span>Page {{ page }} / {{ pages }}</span>
 </nav>
 {%- endmacro %}
 

crudkit/html/ui_fragments.py

@@ -116,6 +116,7 @@ def make_fragments_blueprint(db_session_factory, registry: Dict[str, Any], *, na
     def pager(model):
         Model = registry.get(model) or abort(404)
         page = request.args.get("page", type=int) or 1
+        print(page)
         per_page = request.args.get("per_page", type=int) or 20
         filters = _parse_filters(request.args)
         sort = request.args.get("sort")

inventory/templates/fragments/_table_fragment.html

@@ -52,7 +52,7 @@
 {% endmacro %}
 
 {% macro dynamic_table(id, headers=none, fields=none, entry_route=None, title=None, page=1, per_page=15, offset=0,
-refresh_url=none, model=none) %}
+refresh_url=none, model=none, sort=none) %}
 <!-- Table Fragment -->
 
 {% if title %}
@@ -76,16 +76,20 @@ refresh_url=none, model=none) %}
             </tr>
         </thead>
         <tbody id="rows"
-            hx-get="/ui/{{ model }}/frag/rows?page={{ page }}&per_page{{ per_page }}&fields_csv={{ fields|join(',') }}"
+            hx-get="/ui/{{ model }}/frag/rows?page={{ page }}&per_page={{ per_page }}&fields_csv={{ fields|join(',') }}"
-            hx-trigger="load"
+            hx-trigger="load" hx-target="#rows" hx-swap="innerHTML">
-            hx-target="#rows"
-            hx-swap="innerHTML">
         </tbody>
     </table>
-    <div id="pager"
+    <div id="pager-state">
-        hx-get="/ui/{{ model }}/frag/pager?page={{ page }}&per_page={{ per_page }}&fields_csv={{ fields|join(',') }}"
+        <input type="hidden" name="page" value="{{ page }}">
-        hx-trigger="load, htmx:afterSwap from:#rows"
+        <input type="hidden" name="per_page" value="{{ per_page }}">
-        hx-target="#pager"
+        <input type="hidden" name="fields_csv" value="{{ fields|join(',') }}">
-        hx-swap="outerHTML"></div>
+        {% if sort %}<input type="hidden" name="sort" value="{{ sort }}">{% endif %}
+        {% for k,v in (filters or {}).items() %}
+        <input type="hidden" name="{{ k }}" value="{{ v }}">
+        {% endfor %}
     </div>
+</div>
+<div id="pager" hx-get="/ui/{{ model }}/frag/pager" hx-include="#pager-state"
+    hx-trigger="load, htmx:afterSwap from:#rows" hx-target="#pager" hx-swap="innerHTML"></div>
 {% endmacro %}

inventory/templates/layout.html

@@ -87,6 +87,7 @@
         crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js"></script>
+    <script src="https://unpkg.com/htmx.org@1.9.12/dist/ext/debug.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <script>
         const searchInput = document.querySelector('#search');