Skip to content

Better pagination for large datasets #468

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sinisaos wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Better pagination for large datasets #468

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
82677a9
enable better pagination for large datasets
sinisaos Dec 19, 2025
dfc58d8
change styling for smaller screens
sinisaos Dec 19, 2025
7da1cbd
page changes on input field change event
sinisaos Dec 20, 2025
0d90d2d
fix translations
sinisaos Dec 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 80 additions & 48 deletions admin_ui/src/components/Pagination.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,33 @@
<template>
<div id="pagination">
<ul class="pages" v-if="pageCount < 20">
<li :key="n" v-for="n in pageCount">
<a
class="subtle"
href="#"
v-bind:class="{ active: n === currentPageNumber }"
v-on:click.prevent="changePage(n)"
>{{ n }}</a
>
<ul class="pages">
<!-- Previous pages -->
<li v-for="n in prevPages" :key="n">
<a class="subtle" href="#" v-on:click.prevent="changePage(n)">
<font-awesome-icon icon="angle-left" />
</a>
</li>
</ul>

<div class="page_select" v-else>
<label>{{ $t("Go to page") }}</label>
<select v-model="pageDropdownValue">
<option :key="n" v-for="n in pageCount">{{ n }}</option>
</select>
</div>
<!-- Current page input -->
<li class="current">
<input
type="number"
:min="1"
:max="pageCount"
v-model.number="pageInput"
v-on:keyup.enter="goToPage"
v-on:change="goToPage"
/>
</li>
<li class="count">of {{ pageCount }}</li>

<!-- Next pages -->
<li v-for="n in nextPages" :key="n">
<a href="#" class="subtle" v-on:click.prevent="changePage(n)">
<font-awesome-icon icon="angle-right" />
</a>
</li>
</ul>
</div>
</template>

Expand All @@ -30,7 +40,7 @@ export default defineComponent({
},
data() {
return {
pageDropdownValue: 0
pageInput: 1
}
},
computed: {
Expand All @@ -44,32 +54,56 @@ export default defineComponent({
const count = Math.ceil(this.rowCount / this.pageSize)
return count < 1 ? 1 : count
},
currentTableName() {
return this.$store.state.currentTableName
currentPageNumber() {
return this.$store.state.currentPageNumber || 1
},
filterParams() {
return this.$store.state.filterParams

prevPages(): number[] {
const start = Math.max(1, this.currentPageNumber - 1)
const end = this.currentPageNumber - 1
return this.range(start, end)
},
currentPageNumber() {
return this.$store.state.currentPageNumber

nextPages(): number[] {
const start = this.currentPageNumber + 1
const end = Math.min(this.pageCount, this.currentPageNumber + 1)
return this.range(start, end)
}
},
methods: {
async changePage(pageNumber: number) {
if (this.currentPageNumber != pageNumber) {
console.log("Navigating to " + pageNumber)
this.$store.commit("updateCurrentPageNumber", pageNumber)
await this.$store.dispatch("fetchRows")
}
range(start: number, end: number): number[] {
if (start > end) return []
// return rows for correct page
return Array.from({ length: end - start + 1 }, (_, i) => start + i)
},

async changePage(page: number) {
// return first or last page
if (page < 1 || page > this.pageCount) return
// return current page
if (page === this.currentPageNumber) return

this.$store.commit("updateCurrentPageNumber", page)
await this.$store.dispatch("fetchRows")
},

async goToPage() {
let page = this.pageInput

if (!page || page < 1) page = 1
if (page > this.pageCount) page = this.pageCount

this.pageInput = page
await this.changePage(page)
}
},
watch: {
pageDropdownValue(value) {
this.changePage(value)
currentPageNumber(value: number) {
this.pageInput = value
}
},
mounted() {
this.pageDropdownValue = this.currentPageNumber
this.pageInput = this.currentPageNumber
}
})
</script>
Expand All @@ -80,11 +114,10 @@ export default defineComponent({
div#pagination {
ul.pages {
list-style: none;
margin: 0.5rem 0;
margin: 0.3rem 0;
padding: 0;

li {
border: 1px solid rgba(255, 255, 255, 0.2);
display: inline-block;
font-size: 0.8rem;
margin-bottom: 0.5rem;
Expand All @@ -109,21 +142,20 @@ div#pagination {
}
}
}
span.count {
padding-right: 0.5rem;
}
input {
text-align: center;
}
}

div.page_select {
select,
label {
display: inline-block;
}

label {
font-size: 0.9rem;
margin-right: 1rem;
}

select {
width: auto;
padding-right: 1.5rem;
@media (max-width: 480px) {
div#pagination {
ul.pages {
li {
font-size: 0.6rem;
}
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion admin_ui/src/views/RowListing.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -982,4 +982,4 @@ div.wrapper {
}
}
}
</style>
</style>
15 changes: 0 additions & 15 deletions piccolo_admin/translations/data.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,6 @@
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "For timestamps which are timezone aware, they will be displayed in this timezone by default.",
"Form submitted": "Form submitted",
"Forms": "Forms",
"Go to page": "Go to page",
Copy link

@abhishek-compro abhishek-compro Dec 20, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure how it works in this project, but in my opinion translations shouldn't be removed.

Copy link
Member Author

@sinisaos sinisaos Dec 21, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we need it anymore because in this PR we don't use HTML select for pagination.

https://github.com/piccolo-orm/piccolo_admin/pull/468/files#diff-829d8edbf9a2076e6c9f6ddf97c687500222c30a38e068cfab593ba86cd1f11eL15-R21

"Hide Filters": "Hide Filters",
"Hide referencing tables": "Hide referencing tables",
"Home": "Home",
Expand Down Expand Up @@ -135,7 +134,6 @@
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "Ar gyfer stampiau amser sy'n ymwybodol o gylchfa amser, byddant yn cael eu harddangos yn y gylchfa amser hon yn ddiofyn.",
"Form submitted": "Ffurflen wedi'i chyflwyno",
"Forms": "Ffurflenni",
"Go to page": "Ewch i'r dudalen",
"Hide Filters": "Cuddio hidlwyr",
"Hide referencing tables": "Cuddio tablau cyfeirio",
"Home": "Cartref",
Expand Down Expand Up @@ -217,7 +215,6 @@
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "Za vremenske oznake koje su svjesne vremenske zone, one će prema zadanim postavkama biti prikazane u ovoj vremenskoj zoni.",
"Form submitted": "Obrazac poslan",
"Forms": "Forme",
"Go to page": "Idi na stranicu",
"Hide Filters": "Sakrij filtre",
"Hide referencing tables": "Sakrij referentne tablice",
"Home": "Početna",
Expand Down Expand Up @@ -300,7 +297,6 @@
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "Para carimbos de data/hora que reconhecem o fuso horário, eles serão exibidos nesse fuso horário por padrão.",
"Form submitted": "Formulário enviado",
"Forms": "Formulários",
"Go to page": "Ir para página",
"Hide Filters": "Ocultar filtros",
"Hide referencing tables": "Ocultar tabelas de referência",
"Home": "Página inicial",
Expand Down Expand Up @@ -383,7 +379,6 @@
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "Zeitstempel, die die Zeitzone berücksichtigen, werden standardmäßig in dieser Zeitzone angezeigt.",
"Form submitted": "Formular eingereicht",
"Forms": "Formulare",
"Go to page": "Gehen Sie zur Seite",
"Hide Filters": "Filter ausblenden",
"Hide referencing tables": "Referenzierungstabellen ausblenden",
"Home": "Startseite",
Expand Down Expand Up @@ -466,7 +461,6 @@
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "Pour les horodatages prenant en compte le fuseau horaire, ils seront affichés par défaut dans ce fuseau horaire.",
"Form submitted": "Formulaire soumis",
"Forms": "Formulaires",
"Go to page": "Aller à la page",
"Hide Filters": "Masquer les filtres",
"Hide referencing tables": "Masquer les tables de référence",
"Home": "Accueil",
Expand Down Expand Up @@ -549,7 +543,6 @@
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "Para las marcas de tiempo que tienen en cuenta la zona horaria, se mostrarán en esta zona horaria de forma predeterminada.",
"Form submitted": "Formulario enviado",
"Forms": "Formularios",
"Go to page": "Ir a la página",
"Hide Filters": "Ocultar filtros",
"Hide referencing tables": "Ocultar tablas de referencia",
"Home": "Hogar",
Expand Down Expand Up @@ -631,7 +624,6 @@
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "Aikavyöhyketietoiset aikaleimat näytetään oletusarvoisesti tällä aikavyöhykkeellä.",
"Form submitted": "Lomake lähetetty",
"Forms": "Lomakkeet",
"Go to page": "Mene sivulle",
"Hide Filters": "Piilota suodattimet",
"Hide referencing tables": "Piilota viitetaulukot",
"Home": "Koti",
Expand Down Expand Up @@ -713,7 +705,6 @@
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "Временные метки, которые учитывают часовой пояс, по умолчанию будут отображаться в этом часовом поясе.",
"Form submitted": "Форма отправлена",
"Forms": "Формы",
"Go to page": "Перейти к странице",
"Hide Filters": "Скрыть фильтры",
"Hide referencing tables": "Скрыть связаные таблицы",
"Home": "Главная",
Expand Down Expand Up @@ -795,7 +786,6 @@
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "Для часових позначок, які враховують часовий пояс, вони відображатимуться в цьому часовому поясі за умовчанням.",
"Form submitted": "Форму відправлено",
"Forms": "Форми",
"Go to page": "Перейти на сторінку",
"Hide Filters": "Приховати фільтри",
"Hide referencing tables": "Приховати пов'язані таблиці",
"Home": "Головна",
Expand Down Expand Up @@ -877,7 +867,6 @@
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "对于时区感知的时间戳，默认情况下它们将显示在该时区中。",
"Form submitted": "已提交的表单",
"Forms": "表单",
"Go to page": "转到页面",
"Hide Filters": "隐藏过滤器",
"Hide referencing tables": "隐藏引用的表",
"Home": "主页",
Expand Down Expand Up @@ -960,7 +949,6 @@
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "對於具有時區的時間戳記，將會顯示於此時區所對應的時間。",
"Form submitted": "表單已提交",
"Forms": "表單",
"Go to page": "跳轉頁面",
"Hide Filters": "隱藏篩選器",
"Hide referencing tables": "隱藏引用的表格",
"Home": "首頁",
Expand Down Expand Up @@ -1042,7 +1030,6 @@
"Form submitted": "Form gönderildi",
"Forms": "Formlar",
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "Zaman dilimine duyarlı zaman damgaları varsayılan olarak bu zaman diliminde görüntülenecektir.",
"Go to page": "Sayfaya git",
"Hide Filters": "Filtreleri Gizle",
"Hide referencing tables": "Referans tablolarını gizle",
"Home": "Ana Sayfa",
Expand Down Expand Up @@ -1124,7 +1111,6 @@
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "برای مهرهای زمانی دارای اطلاعات منطقه زمانی، به‌طور پیش‌فرض در این منطقه زمانی نمایش داده می‌شوند.",
"Form submitted": "فرم ارسال شد",
"Forms": "فرم‌ها",
"Go to page": "رفتن به صفحه",
"Hide Filters": "پنهان کردن فیلترها",
"Hide referencing tables": "پنهان کردن جدول‌های مرتبط",
"Home": "خانه",
Expand Down Expand Up @@ -1207,7 +1193,6 @@
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "I timestamp che tengono conto del fuso orario verranno visualizzati in questo fuso orario di default.",
"Form submitted": "Modulo inviato",
"Forms": "Moduli",
"Go to page": "Vai alla pagina",
"Hide Filters": "Nascondi filtri",
"Hide referencing tables": "Nascondi tabelle di riferimento",
"Home": "Home",
Expand Down
Loading