I'm trying to implement a server datatable that gets populated from an API request (response returns data & meta).

However, the pagination buttons to go to next pages are not working properly. When data loads they get enabled than disabled instantly. The backend returns correct data, and when I click fast on next page button OnPageChange() is trigged and prints the next page (2).

I declared the v-data-table as follow:

<v-data-table 
        v-model:items-per-page="itemsPerPage" 
        :headers="headers" 
        :items="users"
        :server-items-length="totalItems" 
        :loading="loading" 
        item-key="id"           
        @update:options="fetchUsers({ page: page, itemsPerPage: itemsPerPage, search: search })"   
        :items-per-page-options="itemsPerPageOptions" 
        :page="page" @update:page="onPageChange">

the script has :

data() {
        return {
            users: [],
            totalItems: 1,
            itemsPerPage: 5,
            page: 1,
            loading: false,
            search: '',
            itemsPerPageOptions: [5, 10, 50],
            ...

methods: {
        async fetchUsers({ page, itemsPerPage, search = this.search }) {
            this.loading = true;

            try {
                const response = await axios.get(`/users`, {
                    params: {
                        page,
                        per_page: itemsPerPage,
                        search: this.search.trim() || '',
                    },
                });

                this.users = response.data.data;
                this.totalItems = response.data.meta.total;

            } catch (error) {
                console.error('Error fetching users:', error);
            } finally {
                this.loading = false;
            }
        },
        onPageChange(newPage) {
            this.page = newPage;
            console.log(newPage);
            this.fetchUsers({
                page: this.page,
                itemsPerPage: this.itemsPerPage,
                search: this.search
            });
        },

Is there a bug with vuetify pagination or am I missing something?

I'm trying to implement a server datatable that gets populated from an API request (response returns data & meta).

However, the pagination buttons to go to next pages are not working properly. When data loads they get enabled than disabled instantly. The backend returns correct data, and when I click fast on next page button OnPageChange() is trigged and prints the next page (2).

I declared the v-data-table as follow:

<v-data-table 
        v-model:items-per-page="itemsPerPage" 
        :headers="headers" 
        :items="users"
        :server-items-length="totalItems" 
        :loading="loading" 
        item-key="id"           
        @update:options="fetchUsers({ page: page, itemsPerPage: itemsPerPage, search: search })"   
        :items-per-page-options="itemsPerPageOptions" 
        :page="page" @update:page="onPageChange">

the script has :

data() {
        return {
            users: [],
            totalItems: 1,
            itemsPerPage: 5,
            page: 1,
            loading: false,
            search: '',
            itemsPerPageOptions: [5, 10, 50],
            ...

methods: {
        async fetchUsers({ page, itemsPerPage, search = this.search }) {
            this.loading = true;

            try {
                const response = await axios.get(`/users`, {
                    params: {
                        page,
                        per_page: itemsPerPage,
                        search: this.search.trim() || '',
                    },
                });

                this.users = response.data.data;
                this.totalItems = response.data.meta.total;

            } catch (error) {
                console.error('Error fetching users:', error);
            } finally {
                this.loading = false;
            }
        },
        onPageChange(newPage) {
            this.page = newPage;
            console.log(newPage);
            this.fetchUsers({
                page: this.page,
                itemsPerPage: this.itemsPerPage,
                search: this.search
            });
        },

Is there a bug with vuetify pagination or am I missing something?

• vuejs3
• vuetify.js

• "are not working properly", what doesn't work exactly? Can you inspect the newly fetched array in your Vue devtools to narrow down the issue? – kissu Commented Feb 6 at 12:50
• @kissu The vPaginationBtns to navigate through table pages are not working correctly. For e.i I have 13 users, I display only 5 per page, the button to navigate to next page is disabled. data.users displays: "users:Array[5], totalItems:13, itemsPerPage:5, page:1, loading:false, search: " – 1K412 Commented Feb 6 at 13:12
• 1 Not sure if you are using the right component, server-side tables in Vuetify are provided by v-data-table-server, but it says v-data-table in your code. – Moritz Ringler Commented Feb 6 at 15:23
• @MoritzRingler Indeed I changed the declaration to ``` v-data-table-serve ``` and adjusted the returned data from backend to contain ``` 'total', 'per_page', 'current_page', 'last_page', 'next_page_url', 'prev_page_url' ``` and the pagination worked perfectly. Thank you! – 1K412 Commented Feb 8 at 10:22

1 Answer 1

I was able to resolve it by declaring the table as v-data-table-server instead of v-data-table (thanks @MoritzRingler) :

<v-data-table-server v-model:items-per-page="itemsPerPage" :headers="headers" :items="users"
        :items-length="totalItems" :loading="loading" item-key="id"
        @update:options="fetchUsers({ page: page, itemsPerPage: itemsPerPage, search: search })"
        :items-per-page-options="itemsPerPageOptions" :page="page" @update:page="onPageChange">

Also make sure the data from backend is sent with 'total', 'per_page', 'current_page', 'last_page', 'next_page_url', 'prev_page_url' fields.