vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Add lazy loading support to DataView

pull/12/head
cagataycivici 2019-05-24 14:03:29 +03:00
parent f66e2b45f4
commit 2e678efce1
3 changed files with 49 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/dataview/DataView.vue
View File

@ -196,10 +196,14 @@
data = this.sort();
}
if (this.paginator)
return data.slice(this.d_first, this.d_first + this.d_rows);
else
if (this.paginator) {
const first = this.lazy ? 0 : this.d_first;
return data.slice(first, first + this.d_rows);
}
else {
return data;
}
}
else {
return null;

2
src/views/dataview/DataViewDemo.vue
View File

@ -9,7 +9,7 @@
<div class="content-section implementation dataview-demo">
<h3 class="first">Default</h3>
<DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField">
<DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField">
<template #header>
<div class="p-grid p-nogutter">
<div class="p-col-6" style="text-align: left">

43
src/views/dataview/DataViewDoc.vue
View File

@ -100,7 +100,7 @@ export default {
of page links to display. To customize the left and right side of the paginators, use <i>paginatorLeft</i> and <i>paginatorRight</i> templates.</p>
<CodeHighlight>
<template v-pre>
&lt;DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20"&gt;
&lt;DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20"&gt;
&lt;template #paginatorLeft&gt;
&lt;Button type="button" icon="pi pi-refresh"/&gt;
&lt;/template&gt;
@ -186,6 +186,45 @@ export default {
}
}
</template>
</CodeHighlight>
<h3>Lazy Loading</h3>
<p>Lazy loading is useful to deal with huge datasets, in order to implement lazy loading use the pagination and utilize the <i>page</i> callback to load your data from the backend.
Pagination in this case needs to display the logical number of records bound to the <i>totalRecords</i> property so that paginator can display itself according to the total records although you'd only
need to load the data of the current page.</p>
<CodeHighlight>
<template v-pre>
&lt;DataView :value="cars" :layout="layout" :paginator="true" :rows="20" :lazy="true" @page="onPage($event)"&gt;
&lt;template #list="slotProps" &gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
&lt;/template&gt;
&lt;template #grid="slotProps"&gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
&lt;/template&gt;
&lt;/DataView&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="js">
<template v-pre>
export default {
data() {
return {
cars: null,
layout: 'list'
}
},
carService: null,
mounted() {
this.cars = //initialize the first chunk of data between 0 and 20
},
methods: {
onPage(event){
this.cars = //load the data between (event.first) and (event.first + event.rows) from a remote datasource
}
}
}
</template>
</CodeHighlight>
<h3>Properties</h3>
@ -383,7 +422,7 @@ export default {
&lt;div class="content-section implementation dataview-demo"&gt;
&lt;h3 class="first"&gt;Default&lt;/h3&gt;
&lt;DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField"&gt;
&lt;DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField"&gt;
&lt;template #header&gt;
&lt;div class="p-grid p-nogutter"&gt;
&lt;div class="p-col-6" style="text-align: left"&gt;