Question

我在vue应用中使用vue-tables-2作为数据表。
vue-tables-2：^ 1.4.70
观点：^ 2.6.10
一切都很好，只不过每页显示项目受选项对象上perPage的限制。
在这里，我有5条记录，并且我已将“每页”选项设置为2。但是它不起作用，仍然显示每页5条记录。另外，当我单击第二页时，注意更改！
这是我的代码：

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>

这是我的结果：

任何帮助表示赞赏。

Answer 1

服务器端方法：
我只是意识到，每次我们单击分页号时，它都会为服务器发送页码和每页号的项目，并且作为响应，它会获得新的数据数组。静态数据方法：
如果我们使用js本身定义数据，则该表将处理分页，因为它知道每页的页码和项目。
在数据表中加载数据的最佳实践是使用服务器端方法，因为如果我们有太多数据，则会影响页面加载时间。

vue-tables-2分页不限制每个页面的数量

1 个答案: