Tuning for lazy loading

pull/41/head
cagataycivici 2019-07-10 21:09:22 +03:00
parent 7cc6de6fb8
commit 62e2c0f8c1
4 changed files with 32 additions and 20 deletions

View File

@ -847,24 +847,29 @@ export default {
return [];
},
processedData() {
if (this.value && this.value.length) {
let data = this.value;
if (this.sorted) {
if(this.sortMode === 'single')
data = this.sortSingle(data);
else if(this.sortMode === 'multiple')
data = this.sortMultiple(data);
}
if (this.hasFilters) {
data = this.filter(data);
}
return data;
if (this.lazy) {
return this.value;
}
else {
return null;
if (this.value && this.value.length) {
let data = this.value;
if (this.sorted) {
if(this.sortMode === 'single')
data = this.sortSingle(data);
else if(this.sortMode === 'multiple')
data = this.sortMultiple(data);
}
if (this.hasFilters) {
data = this.filter(data);
}
return data;
}
else {
return null;
}
}
},
dataToRender() {
@ -888,7 +893,8 @@ export default {
}
},
empty() {
return (!this.value || this.value.length === 0);
const data = this.processedData;
return (!data || data.length === 0);
},
paginatorTop() {
return this.paginator && (this.paginatorPosition !== 'bottom' || this.paginatorPosition === 'both');

View File

@ -318,7 +318,7 @@ export default {
<p>Lazy loading is implemented by handling pagination, sorting and filtering using their own page, sort and filter events in addition to enabling lazy property. Here is a sample paging implementation with in memory data.</p>
<CodeHighlight>
<template v-pre>
&lt;DataTable :value="cars" :lazy="true" paginator="true" :rows="10"
&lt;DataTable :value="cars" :lazy="true" :paginator="true" :rows="10"
:totalRecords="totalRecords" :loading="loading" @page="onPage($event)"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt;

View File

@ -44,6 +44,9 @@
<MultiSelect v-model="filters['color']" :options="colors" optionLabel="name" optionValue="value" placeholder="Select a Color" />
</template>
</Column>
<template #empty>
No records found.
</template>
</DataTable>
</div>
@ -86,6 +89,9 @@
&lt;MultiSelect v-model="filters['color']" :options="colors" optionLabel="name" optionValue="value" placeholder="Select a Color" /&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;template #empty&gt;
No records found.
&lt;/template&gt;
&lt;/DataTable&gt;
</template>
</CodeHighlight>

View File

@ -13,7 +13,7 @@
</div>
<div class="content-section implementation">
<DataTable :value="cars" :lazy="true" paginator="true" :rows="10"
<DataTable :value="cars" :lazy="true" :paginator="true" :rows="10"
:totalRecords="totalRecords" :loading="loading" @page="onPage($event)">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
@ -27,7 +27,7 @@
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;DataTable :value="cars" :lazy="true" paginator="true" :rows="10"
&lt;DataTable :value="cars" :lazy="true" :paginator="true" :rows="10"
:totalRecords="totalRecords" :loading="loading" @page="onPage($event)"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt;