vue-tables-2 pagination doesn't limit per page amount

Question

I'm using vue-tables-2 as datatable in my vue app.
vue-tables-2: ^1.4.70
vue: ^2.6.10
everything is fine except showing items per page which is limited by perPage on options object.
Here I have 5 records and I had set per page option to 2. but its not working and still showing 5 records per page. Also when I click on page two noting changes!
Here is my code:

tickets.vue:

<template>
    <v-server-table url="/panel/tickets/data" :columns="columns" :options="options"></v-server-table>
</template>
<script>
    export default ({
        name: 'ticketTable',
        data() {
            return {
                columns: ['subject', 'status', 'department', 'date'],
                options: {
                    responseAdapter(data) {
                        return {
                            data,
                            count: data.length
                        }
                    },
                    headings: {
                        subject: 'موضوع',
                        status: 'وضعیت',
                        department: 'دپارتمان',
                        date: 'تاریخ ایجاد'
                    },
                    perPage: 2,
                    pagination: {
                        edge: false,
                        dropdown: false,
                        chunk: 2
                    },
                    filterable: true,
                    sortable: 'subject',
                }
            }
        }
    });
</script>

app.js:

import ticketTable from './components/tickets';
import {ServerTable} from 'vue-tables-2';

Vue.use(ServerTable, {
    texts: {
        count: "نمایش {from} تا {to} از {count} رکورد",
        first: 'اولین',
        last: 'آخرین',
        filter: "جستجو : ",
        filterPlaceholder: "جستجو",
        limit: "رکورد:",
        page: "صفحه:",
        noResults: "هیچ نتیجه ای یافت نشد",
        filterBy: "فیلتر با {column}",
        loading: 'در حال آماده سازی...',
        defaultOption: 'انتخاب {column}',
        columns: 'ستون ها'
    }
});

html:

<section class="mt-4 mb-4">
                <div class="section-title">
                    <h4 class="mb-0">لیست تمام تیکت ها</h4>
                </div>
                <div class="section-content">
                    <ticket-table></ticket-table>
                </div>
            </section>

Here is my result:

Any help is appreciated.

score 0 · Accepted Answer · answered Sep 03 '19 at 13:33

Server-side method:
I just realize that every time we click on pagination number it sends the page number and item per page number for the server and as respone it gots new data array. Static data method:
If we define our data in js itself, the table will handle pagination because it knows the page number and item per page.
The best practice for loading data in data tables is to use Server-side method because if we have too much data, it affects page load time.

vue-tables-2 pagination doesn't limit per page amount

1 Answers1