Skip to content

Commit

Permalink
Fix #862 - New Lazy DataTable Demo with Remote Source
Browse files Browse the repository at this point in the history
  • Loading branch information
@tugcekucukoglu
tugcekucukoglu committed Jan 15, 2021
1 parent 9b95931 commit 286e25b
Show file tree
Hide file tree
Showing 2 changed files with 206 additions and 47 deletions.
18 changes: 11 additions & 7 deletions src/service/CustomerService.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,21 @@ export default class CustomerService {

getCustomersSmall() {
return axios.get('demo/data/customers-small.json').then(res => res.data.data);
}
}

getCustomersMedium() {
getCustomersMedium() {
return axios.get('demo/data/customers-medium.json').then(res => res.data.data);
}
}

getCustomersLarge() {
getCustomersLarge() {
return axios.get('demo/data/customers-large.json').then(res => res.data.data);
}
}

getCustomersXLarge() {
getCustomersXLarge() {
return axios.get('demo/data/customers-xlarge.json').then(res => res.data.data);
}
}

getCustomers(params) {
return axios.get('https://www.primefaces.org/data/customers', { params }).then(res => res.data)
}
}
235 changes: 195 additions & 40 deletions src/views/datatable/DataTableLazyDemo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,28 @@

<div class="content-section implementation">
<div class="card">
<DataTable :value="customers" :lazy="true" :paginator="true" :rows="10"
:totalRecords="totalRecords" :loading="loading" @page="onPage($event)">
<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 :value="customers" :lazy="true" :paginator="true" :rows="10" ref="dt"
:totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)">
<Column field="name" header="Name" filterMatchMode="startsWith" ref="name" :sortable="true">
<template #filter>
<InputText type="text" v-model="filters['name']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by name"/>
</template>
</Column>
<Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" ref="country.name" :sortable="true">
<template #filter>
<InputText type="text" v-model="filters['country.name']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by name"/>
</template>
</Column>
<Column field="company" header="Company" filterMatchMode="contains" ref="company" :sortable="true">
<template #filter>
<InputText type="text" v-model="filters['company']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by name"/>
</template>
</Column>
<Column field="representative.name" header="Representative" filterField="representative.name" ref="representative.name" :sortable="true">
<template #filter>
<InputText type="text" v-model="filters['representative.name']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by representative"/>
</template>
</Column>
</DataTable>
</div>
</div>
Expand All @@ -27,12 +43,28 @@
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;DataTable :value="customers" :lazy="true" :paginator="true" :rows="10"
:totalRecords="totalRecords" :loading="loading" @page="onPage($event)"&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 :value="customers" :lazy="true" :paginator="true" :rows="10" ref="dt"
:totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)"&gt;
&lt;Column field="name" header="Name" filterMatchMode="startsWith" ref="name" :sortable="true"&gt;
&lt;template #filter&gt;
&lt;InputText type="text" v-model="filters['name']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by name"/&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" ref="country.name" :sortable="true"&gt;
&lt;template #filter&gt;
&lt;InputText type="text" v-model="filters['country.name']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by name"/&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="company" header="Company" filterMatchMode="contains" ref="company" :sortable="true"&gt;
&lt;template #filter&gt;
&lt;InputText type="text" v-model="filters['company']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by name"/&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="representative.name" header="Representative" filterField="representative.name" filterMatchMode="startsWith" ref="representative.name" :sortable="true"&gt;
&lt;template #filter&gt;
&lt;InputText type="text" v-model="filters['representative.name']" @keydown="onFilter($event)" class="p-column-filter" placeholder="Search by representative"/&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</CodeHighlight>
Expand All @@ -45,34 +77,95 @@ export default {
return {
loading: false,
totalRecords: 0,
customers: null
customers: null,
filters: {},
lazyFilters: {},
columns: [
{field: 'name', header: 'Name'},
{field: 'country.name', header: 'Country'},
{field: 'company', header: 'Company'},
{field: 'representative.name', header: 'Representative'}
]
}
},
datasource: null,
customerService: null,
created() {
this.customerService = new CustomerService();
},
mounted() {
this.loading = true;

setTimeout(() => {
this.customerService.getCustomersLarge().then(data => {
this.datasource = data;
this.totalRecords = data.length,
this.customers = this.datasource.slice(0, 10);
this.loading = false;
});
}, 500);
this.customerService.getCustomers({lazyEvent: JSON.stringify({first: 0, rows: this.$refs.dt.rows})}).then(data => {
this.customers = data.customers;
this.totalRecords = data.totalRecords;
this.loading = false;
});

const filters = {};
for(let i=0; i &lt; this.columns.length; i++) {
let obj = {};
obj["matchMode"] = this.$refs[this.columns[i].field].filterMatchMode || "startsWith";
obj["value"] = null;
filters[this.columns[i].field] = obj;
}

this.lazyFilters = filters;
},
methods: {
onPage(event) {
onLazyEvent(event) {
const proxyFilters = JSON.parse(JSON.stringify(this.filters));
for(let filter in proxyFilters) {
this.lazyFilters[filter].value = proxyFilters[filter] || null;
}

this.loading = true;

let params = {
first: event.first,
rows: event.rows,
sortField: event.sortField,
sortOrder: event.sortOrder,
filters: this.lazyFilters
};

setTimeout(() => {
this.customers = this.datasource.slice(event.first, event.first + event.rows);
this.loading = false;
}, 500);
this.customerService.getCustomers({lazyEvent: JSON.stringify( params )}).then(data => {
this.customers = data.customers;
this.totalRecords = data.totalRecords;
this.loading = false;
});
}, 1000);
},
onPage(event) {
this.onLazyEvent(event);
},
onSort(event) {
this.onLazyEvent(event);
},
onFilter(event) {
if(event.keyCode === 13 || event.value) {
const proxyFilters = JSON.parse(JSON.stringify(this.filters));
for(let filter in proxyFilters) {
this.lazyFilters[filter].value = proxyFilters[filter] || null;
}

this.loading = true;
let params = {
first: 0,
rows: this.$refs.dt.rows,
sortField: null,
sortOrder: null,
filters: this.lazyFilters
};

setTimeout(() => {
this.customerService.getCustomers({lazyEvent: JSON.stringify( params )}).then(data => {
this.customers = data.customers;
this.totalRecords = data.totalRecords;
this.loading = false;
});
}, 1000);
}
}
}
}
Expand All @@ -91,34 +184,96 @@ export default {
return {
loading: false,
totalRecords: 0,
customers: null
customers: null,
filters: {},
lazyFilters: {},
columns: [
{field: 'name', header: 'Name'},
{field: 'country.name', header: 'Country'},
{field: 'company', header: 'Company'},
{field: 'representative.name', header: 'Representative'}
]
}
},
datasource: null,
customerService: null,
created() {
this.customerService = new CustomerService();
},
mounted() {
this.loading = true;
setTimeout(() => {
this.customerService.getCustomersLarge().then(data => {
this.datasource = data;
this.totalRecords = data.length,
this.customers = this.datasource.slice(0, 10);
this.loading = false;
});
}, 500);
this.customerService.getCustomers({lazyEvent: JSON.stringify({first: 0, rows: this.$refs.dt.rows})}).then(data => {
this.customers = data.customers;
this.totalRecords = data.totalRecords;
this.loading = false;
});
const filters = {};
for(let i=0; i<this.columns.length; i++) {
let obj = {};
obj["matchMode"] = this.$refs[this.columns[i].field].filterMatchMode || "startsWith";
obj["value"] = null;
filters[this.columns[i].field] = obj;
}
this.lazyFilters = filters;
},
methods: {
onPage(event) {
onLazyEvent(event) {
const proxyFilters = JSON.parse(JSON.stringify(this.filters));
for(let filter in proxyFilters) {
this.lazyFilters[filter].value = proxyFilters[filter] || null;
}
this.loading = true;
let params = {
first: event.first,
rows: event.rows,
sortField: event.sortField,
sortOrder: event.sortOrder,
filters: this.lazyFilters
};
setTimeout(() => {
this.customers = this.datasource.slice(event.first, event.first + event.rows);
this.loading = false;
}, 500);
this.customerService.getCustomers({lazyEvent: JSON.stringify( params )}).then(data => {
this.customers = data.customers;
this.totalRecords = data.totalRecords;
this.loading = false;
});
}, 1000);
},
onPage(event) {
this.onLazyEvent(event);
},
onSort(event) {
this.onLazyEvent(event);
},
onFilter(event) {
if(event.keyCode === 13 || event.value) {
// proxy to object
const proxyFilters = JSON.parse(JSON.stringify(this.filters));
for(let filter in proxyFilters) {
this.lazyFilters[filter].value = proxyFilters[filter] || null;
}
this.loading = true;
let params = {
first: 0,
rows: this.$refs.dt.rows,
sortField: null,
sortOrder: null,
filters: this.lazyFilters
};
setTimeout(() => {
this.customerService.getCustomers({lazyEvent: JSON.stringify( params )}).then(data => {
this.customers = data.customers;
this.totalRecords = data.totalRecords;
this.loading = false;
});
}, 1000);
}
}
}
}
Expand Down

0 comments on commit 286e25b

Please sign in to comment.