Feature Request: Paginator - Add v-model for Programmatic Current Page Control #2731
Unanswered
mostafaznv
asked this question in
PrimeVue
Replies: 3 comments
-
Funny this discussion was create just hours ago and was gonna ask the same :)) Would be a useful addition. |
Beta Was this translation helpful? Give feedback.
0 replies
-
I need the ability to manipulate the current page of the paginator when receiving data from the server. I can't control the page within my application's flow, which is causing issues. |
Beta Was this translation helpful? Give feedback.
0 replies
-
For now, this is my workaround. It's not the best or even a good solution, but it's what it is. <template>
<div>
<div v-if="list.length">
<DataTable :value="list">
<Column
v-for="col of columns"
:header="col.header"
:field="col.field"
:key="col.field"
/>
</DataTable>
<Paginator
ref="paginator"
@page="onPageChange"
:rows="pagination.perPage"
:total-records="pagination.total"
/>
</div>
</div>
</template>
<script setup>
import {watch, useTemplateRef} from 'vue'
import {navigateTo, useRoute} from '#app'
import TestService from '~/services/TestService'
// composables
const route = useRoute()
const paginatorRef = useTemplateRef('paginator')
// variables
const columns = [
{field: 'col_1', header: 'Column 1'},
{field: 'col_2', header: 'Column 2'}
]
const list = ref([])
const pagination = ref<>({
total: 0,
perPage: 0
})
// watchers
watch(
() => route.query,
async () => {
await fetch()
},
{deep: true}
)
// methods
function onPageChange(event: PageState) {
navigateTo({
replace: true,
query: {
...route.query,
page: event.page + 1
}
})
}
// api
async function fetch() {
const queries = {
q1: route.query.q1 ?? null,
q2: route.query.q2 ?? null,
page: route.query.page ?? 1
}
const {status, data} = await TestService.list(queries)
if (status.value === 'success') {
list.value = data.value.data
pagination.value = data.value.pagination
paginatorRef.value?.changePage(queries.page - 1) // <----------------- manually reset
}
}
await fetch()
</script>
|
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Description:
This feature request proposes the implementation of a
v-model
binding for the paginator component, allowing developers to programmatically control the current page of the paginator. By introducing a two-way data binding mechanism, users can easily synchronize the current page state with an external data source or application logic.Benefits:
v-model
, developers can manage the current page state more efficiently, enabling dynamic updates based on user actions or application events.Use Case:
Implementing this feature will make the paginator component more robust and adaptable to developers’ needs, streamlining the overall user experience in applications that require pagination functionality.
Beta Was this translation helpful? Give feedback.
All reactions