From e9bfcecf73d6d3e4f0a6c7b06a55c55f8891e259 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Tue, 30 Jun 2020 15:51:57 +0300
Subject: [PATCH] Pagination

---
 src/views/datatable/DataTableLazyDemo.vue | 58 +++++++++++------------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/views/datatable/DataTableLazyDemo.vue b/src/views/datatable/DataTableLazyDemo.vue
index 4e87e3477..5ba9d3177 100755
--- a/src/views/datatable/DataTableLazyDemo.vue
+++ b/src/views/datatable/DataTableLazyDemo.vue
@@ -2,7 +2,7 @@
 	<div>
 		<div class="content-section introduction">
 			<div class="feature-intro">
-				<h1>DataTable - Lazy</h1>
+				<h1>DataTable <span>Lazy</span></h1>
 				<p>Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime paging, sorting and filtering happens.
                     Sample belows imitates lazy paging by using an in memory list. It is also important to assign the logical number of rows to totalRecords by doing a projection query for paginator configuration
                     so that paginator displays the UI assuming there are actually records of totalRecords size although in reality they aren't as in lazy mode, only the records that are displayed on the current page exist.
@@ -12,12 +12,12 @@
 
 		<div class="content-section implementation">
             <div class="card">
-                <DataTable :value="cars" :lazy="true" :paginator="true" :rows="10"
+                <DataTable :value="customers" :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>
-                    <Column field="brand" header="Brand"></Column>
-                    <Column field="color" header="Color"></Column>
+                    <Column field="name" header="Name"></Column>
+                    <Column field="country.name" header="Country"></Column>
+                    <Column field="company" header="Company"></Column>
+                    <Column field="representative.name" header="Representative"></Column>
                 </DataTable>
             </div>
 		</div>
@@ -27,52 +27,52 @@
                 <TabPanel header="Source">
 <CodeHighlight>
 <template v-pre>
-&lt;DataTable :value="cars" :lazy="true" :paginator="true" :rows="10"
+&lt;DataTable :value="customers" :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;
-    &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
-    &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
+    &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
+    &lt;Column field="country.name" header="Country"&gt;&lt;/Column&gt;
+    &lt;Column field="company" header="Company"&gt;&lt;/Column&gt;
+    &lt;Column field="representative.name" header="Representative"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
 </template>
 </CodeHighlight>
 
 <CodeHighlight lang="javascript">
-import CarService from '../../service/CarService';
+import CustomerService from '../../service/CustomerService';
 
 export default {
     data() {
         return {
             loading: false,
             totalRecords: 0,
-            cars: null
+            customers: null
         }
     },
     datasource: null,
-    carService: null,
+    customerService: null,
     created() {
-        this.carService = new CarService();
+        this.customerService = new CustomerService();
     },
     mounted() {
         this.loading = true;
 
         setTimeout(() => {
-            this.carService.getCarsLarge().then(data => {
+            this.customerService.getCustomersLarge().then(data => {
                 this.datasource = data;
                 this.totalRecords = data.length,
-                this.cars = this.datasource.slice(0, 10);
+                this.customers = this.datasource.slice(0, 10);
                 this.loading = false;
             });
-        }, 1000);
+        }, 500);
     },
     methods: {
         onPage(event) {
             this.loading = true;
 
             setTimeout(() => {
-                this.cars = this.datasource.slice(event.first, event.first + event.rows);
+                this.customers = this.datasource.slice(event.first, event.first + event.rows);
                 this.loading = false;
-            }, 1000);
+            }, 500);
         }
     }
 }
@@ -84,41 +84,41 @@ export default {
 </template>
 
 <script>
-import CarService from '../../service/CarService';
+import CustomerService from '../../service/CustomerService';
 
 export default {
     data() {
         return {
             loading: false,
             totalRecords: 0,
-            cars: null
+            customers: null
         }
     },
     datasource: null,
-    carService: null,
+    customerService: null,
     created() {
-        this.carService = new CarService();
+        this.customerService = new CustomerService();
     },
     mounted() {
         this.loading = true;
 
         setTimeout(() => {
-            this.carService.getCarsLarge().then(data => {
+            this.customerService.getCustomersLarge().then(data => {
                 this.datasource = data;
                 this.totalRecords = data.length,
-                this.cars = this.datasource.slice(0, 10);
+                this.customers = this.datasource.slice(0, 10);
                 this.loading = false;
             });
-        }, 1000);
+        }, 500);
     },
     methods: {
         onPage(event) {
             this.loading = true;
 
             setTimeout(() => {
-                this.cars = this.datasource.slice(event.first, event.first + event.rows);
+                this.customers = this.datasource.slice(event.first, event.first + event.rows);
                 this.loading = false;
-            }, 1000);
+            }, 500);
         }
     }
 }