add pagination
This commit is contained in:
parent
b54bcdd9e9
commit
1c28950b53
|
@ -1,6 +1,7 @@
|
|||
from typing import Any
|
||||
|
||||
from django.contrib.auth.decorators import login_required
|
||||
from django.core.paginator import Paginator
|
||||
from django.db.models.manager import BaseManager
|
||||
from django.http import HttpRequest, HttpResponse
|
||||
from django.shortcuts import render
|
||||
|
@ -14,9 +15,16 @@ from games.views import dateformat
|
|||
@login_required
|
||||
def list_purchases(request: HttpRequest) -> HttpResponse:
|
||||
context: dict[Any, Any] = {}
|
||||
purchases: BaseManager[Purchase] = Purchase.objects.all()[0:10]
|
||||
paginator = Paginator(Purchase.objects.order_by("created_at"), 10)
|
||||
page_number = request.GET.get("page", 1)
|
||||
page_obj = paginator.get_page(page_number)
|
||||
purchases = page_obj.object_list
|
||||
context = {
|
||||
"title": "Manage purchases",
|
||||
"page_obj": page_obj,
|
||||
"elided_page_range": page_obj.paginator.get_elided_page_range(
|
||||
page_number, on_each_side=1, on_ends=1
|
||||
),
|
||||
"data": {
|
||||
"columns": [
|
||||
"Name",
|
||||
|
|
|
@ -1370,6 +1370,10 @@ input:checked + .toggle-bg {
|
|||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mb-8 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
@ -1382,6 +1386,10 @@ input:checked + .toggle-bg {
|
|||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.ms-0 {
|
||||
margin-inline-start: 0px;
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
@ -1451,6 +1459,10 @@ input:checked + .toggle-bg {
|
|||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.h-8 {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.h-9 {
|
||||
height: 2.25rem;
|
||||
}
|
||||
|
@ -1639,6 +1651,12 @@ input:checked + .toggle-bg {
|
|||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.-space-x-px > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(-1px * var(--tw-space-x-reverse));
|
||||
margin-left: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
|
||||
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(0.25rem * var(--tw-space-x-reverse));
|
||||
|
@ -1885,6 +1903,10 @@ input:checked + .toggle-bg {
|
|||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.pt-4 {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.pt-8 {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
@ -1966,6 +1988,10 @@ input:checked + .toggle-bg {
|
|||
font-weight: 500;
|
||||
}
|
||||
|
||||
.font-normal {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.font-semibold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
@ -1982,6 +2008,10 @@ input:checked + .toggle-bg {
|
|||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.leading-tight {
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.text-blue-600 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(28 100 242 / var(--tw-text-opacity));
|
||||
|
@ -2474,6 +2504,11 @@ textarea:disabled:is(.dark *) {
|
|||
color: rgb(75 85 99 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.hover\:text-gray-700:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(55 65 81 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.hover\:text-gray-900:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
|
@ -2845,10 +2880,18 @@ textarea:disabled:is(.dark *) {
|
|||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:mb-0 {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.md\:block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.md\:inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.md\:w-auto {
|
||||
width: auto;
|
||||
}
|
||||
|
@ -2904,31 +2947,3 @@ textarea:disabled:is(.dark *) {
|
|||
border-start-end-radius: 0.5rem;
|
||||
border-end-end-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.\[\&_td\:first-of-type\]\:whitespace-nowrap td:first-of-type {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.\[\&_td\:first-of-type\]\:px-6 td:first-of-type {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.\[\&_td\:first-of-type\]\:py-4 td:first-of-type {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.\[\&_td\:first-of-type\]\:font-medium td:first-of-type {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.\[\&_td\:first-of-type\]\:text-gray-900 td:first-of-type {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.\[\&_td\:first-of-type\]\:dark\:text-white:is(.dark *) td:first-of-type {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
<div class="relative overflow-x-auto">
|
||||
<div class="relative overflow-x-auto shadow-md sm:rounded-lg"
|
||||
hx-boost="false">
|
||||
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
|
||||
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
|
||||
<tr>
|
||||
|
@ -11,4 +12,37 @@
|
|||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<nav class="flex items-center flex-column flex-wrap md:flex-row justify-between pt-4"
|
||||
aria-label="Table navigation">
|
||||
<span class="text-sm font-normal text-gray-500 dark:text-gray-400 mb-4 md:mb-0 block w-full md:inline md:w-auto">Showing <span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.paginator.page_range.start }}-{{ page_obj.paginator.page_range.stop }}</span> of <span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.paginator.count }}</span></span>
|
||||
<ul class="inline-flex -space-x-px rtl:space-x-reverse text-sm h-8">
|
||||
<li>
|
||||
{% if page_obj.has_previous %}
|
||||
<a href="?page={{ page_obj.previous_page_number }}"
|
||||
class="flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Previous</a>
|
||||
{% else %}
|
||||
<a aria-current="page"
|
||||
class="cursor-not-allowed flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-s-lg dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400">Previous</a>
|
||||
{% endif %}
|
||||
{% for page in elided_page_range %}
|
||||
<li>
|
||||
{% if page != page_obj.number %}
|
||||
<a href="?page={{ page }}"
|
||||
class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">{{ page }}</a>
|
||||
{% else %}
|
||||
<a aria-current="page"
|
||||
class="cursor-not-allowed flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400">{{ page }}</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% if page_obj.has_next %}
|
||||
<a href="?page={{ page_obj.next_page_number }}"
|
||||
class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Next</a>
|
||||
{% else %}
|
||||
<a aria-current="page"
|
||||
class="cursor-not-allowed flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400">Next</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
|
|
@ -4,5 +4,5 @@
|
|||
{{ title }}
|
||||
{% endblock title %}
|
||||
{% block content %}
|
||||
{% simple_table columns=data.columns rows=data.rows %}
|
||||
{% simple_table columns=data.columns rows=data.rows page_obj=page_obj elided_page_range=elided_page_range %}
|
||||
{% endblock content %}
|
||||
|
|
Loading…
Reference in New Issue