[英]Vuetify: Server side paginated datatable does not sort client side
问题已在标题中描述:当我使用服务器端分页数据表(此组件: https : //vuetifyjs.com/en/components/data-tables )并希望它对客户端进行排序时(例如,我使用公共API 我没有开发)默认排序在组件上不起作用。
甚至有可能吗? 文档仅给出了分页和排序服务器端的示例。
我的组件:
<v-data-table
:headers="datapointHeaders"
:items="datapoints"
:items-per-page="datapointsPerPage"
:server-items-length="datapointsTotalItems"
:loading="loading"
:loading-text="'Loading datapoints ...'"
:options.sync="options"
:footer-props="footerProps"
>
<template v-slot:item.health="{ item }">
<StatusLamp
:color="item.health"
:classes="'ml-2'"
/>
</template>
<template v-slot:item.attributes="{ item }">
<v-btn
outlined
small
color="blue"
@click="showAttributes(item)"
class="mb-1 mr-1 mt-1"
>details</v-btn>
</template>
</v-data-table>
JS部分:
private options: any = {
itemsPerPage: this.datapointsPerPage,
page: this.datapointsCurrentPage,
};
@Watch('options.page')
onPageChange(value: number, oldValue: number): void {
this.fetchDatapoints(value, this.options.itemsPerPage);
}
@Watch('options.itemsPerPage')
onPerPageChange(value: number, oldValue: number): void {
this.fetchDatapoints(this.page, value);
}
get loading(): boolean {
return get(this.$store.getters.getDatapoints, ['loading'], true);
}
get attributes(): any {
const res: any = [];
if (this.selectedDatapoint == null) return [];
Object.keys(get(this.selectedDatapoint, ['attributes'], {})).forEach((key: string) => {
if (Object.prototype.hasOwnProperty.call(get(this.selectedDatapoint, ['attributes'], {}), key)) {
res.push({ name: key, value: this.selectedDatapoint.attributes[key] });
}
});
return res;
}
get datapoints(): any {
return this.$store.getters.getDatapoints.datapoints
? get(this.$store.getters.getDatapoints.datapoints, 'items', []).map((item: any) => ({
...item,
last_value: Math.floor(get(item, ['data', '0', '1'], 0) * 100) / 100,
}))
: [];
}
get datapointsCurrentPage(): number {
return get(this.$store.getters.getDatapoints, ['datapoints', 'meta', 'current_page'], 1);
}
get datapointsPerPage(): number {
return get(this.$store.getters.getDatapoints, ['datapoints', 'meta', 'per_page'], 10);
}
get datapointsTotalPages(): number {
return get(this.$store.getters.getDatapoints, ['datapoints', 'meta', 'total_pages'], 0);
}
get datapointsTotalItems(): number {
return get(this.$store.getters.getDatapoints, ['datapoints', 'meta', 'total_items'], 0);
}
我刚刚注意到:一旦我从v-data-table
组件中删除了server-items-length
属性,排序就会在客户端进行。 但是,显然,项目的总长度丢失了,它只将当前per_page
显示为项目长度的最大值。
关于 vuetify 官方 discord 上的 #vuetify-help 频道,我正是问这个问题的,只要使用 server-items-length,cilent 端的分页和排序就会被禁用。 相同的规则适用于搜索。
另外,经过一些调查,我发现了一个与search
+ server side pagination
相关的问题: https : //github.com/vuetifyjs/vuetify/issues/3475#issuecomment-370566804
我不得不承认,客户端排序和过滤对服务器端分页数据没有任何意义,因为它只会过滤和搜索当前页面。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.