sort and pagination added (DataView)
parent
dbb5146eb8
commit
0f4b1f09a8
|
@ -3,18 +3,18 @@
|
|||
<div class="p-dataview-header" v-if="$scopedSlots.header">
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
<Paginator v-if="paginatorTop" :rows="rows" :first="first" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
|
||||
<Paginator v-if="paginatorTop" :rows.sync="rows" :first.sync="firstPage" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
|
||||
:currentPageReportTemplate="currentPageReportTemplate" :class="{'p-paginator-top': paginatorTop}"></Paginator>
|
||||
<div class="p-dataview-content">
|
||||
<div class="p-grid">
|
||||
<template v-for="(data,index) of (value)">
|
||||
<template v-for="(data,index) of (templateItems)">
|
||||
<slot v-if="$scopedSlots.listItem && layout === 'list'" name="listItem" :data="data" :index="index"></slot>
|
||||
<slot v-if="$scopedSlots.gridItem && layout === 'grid'" name="gridItem" :data="data" :index="index"></slot>
|
||||
</template>
|
||||
<div v-if="isEmpty" class="p-col-12">{{emptyMessage}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<Paginator v-if="paginatorBottom" :rows="rows" :first="first" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
|
||||
<Paginator v-if="paginatorBottom" :rows.sync="rows" :first.sync="firstPage" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
|
||||
:currentPageReportTemplate="currentPageReportTemplate" :class="{'p-paginator-bottom': paginatorBottom}"></Paginator>
|
||||
<div class="p-dataview-footer" v-if="$scopedSlots.footer">
|
||||
<slot name="footer"></slot>
|
||||
|
@ -90,7 +90,23 @@
|
|||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
firstPage: this.first ? this.first : 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
processData() {
|
||||
let data = this.value;
|
||||
|
||||
if (data && data.length) {
|
||||
if (this.sortField) {
|
||||
data = this.sort();
|
||||
}
|
||||
}
|
||||
|
||||
return data;
|
||||
},
|
||||
sort() {
|
||||
if (this.value) {
|
||||
const value = [...this.value];
|
||||
|
@ -119,17 +135,6 @@
|
|||
else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
processData() {
|
||||
let data = this.value;
|
||||
|
||||
if (data && data.length) {
|
||||
if (this.sortField) {
|
||||
data = this.sort();
|
||||
}
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
@ -162,6 +167,27 @@
|
|||
}
|
||||
else
|
||||
return null;
|
||||
},
|
||||
templateItems (){
|
||||
let value = this.processData();
|
||||
|
||||
if (value && value.length) {
|
||||
if (this.paginator) {
|
||||
const rows = this.rows;
|
||||
const first = this.lazy ? 0 : this.firstPage;
|
||||
const last = rows + first;
|
||||
let items = [];
|
||||
|
||||
for (let i = first; i < last; i++) {
|
||||
items.push(value[i]);
|
||||
}
|
||||
return items;
|
||||
}
|
||||
else {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
else return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -9,10 +9,12 @@
|
|||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Default</h3>
|
||||
<DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20">
|
||||
<DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="5" :sortOrder="sortOrder" :sortField="sortField">
|
||||
<template #header>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-6" style="text-align: right"></div>
|
||||
<div class="p-col-6" style="text-align: left">
|
||||
<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By" @change="onSortChange($event)"/>
|
||||
</div>
|
||||
<div class="p-col-6" style="text-align: right">
|
||||
<DataViewLayoutOptions :layout="layout" @change="changeMode"></DataViewLayoutOptions>
|
||||
</div>
|
||||
|
@ -61,6 +63,14 @@
|
|||
return {
|
||||
cars: null,
|
||||
layout: 'list',
|
||||
sortKey: null,
|
||||
sortOrder: null,
|
||||
sortField: null,
|
||||
sortOptions: [
|
||||
{label: 'Newest First', value: '!year'},
|
||||
{label: 'Oldest First', value: 'year'},
|
||||
{label: 'Brand', value: 'brand'}
|
||||
]
|
||||
}
|
||||
},
|
||||
carService: null,
|
||||
|
@ -73,6 +83,20 @@
|
|||
methods: {
|
||||
changeMode(event) {
|
||||
this.layout = event.value;
|
||||
},
|
||||
onSortChange(event){
|
||||
const value = event.value.value;
|
||||
|
||||
if (value.indexOf('!') === 0) {
|
||||
this.sortOrder = -1;
|
||||
this.sortField = value.substring(1, value.length);
|
||||
this.sortKey = value;
|
||||
}
|
||||
else {
|
||||
this.sortOrder = 1;
|
||||
this.sortField = value;
|
||||
this.sortKey = value;
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
Loading…
Reference in New Issue