diff --git a/src/service/CustomerService.js b/src/service/CustomerService.js
index 2b2820713..2498173fa 100755
--- a/src/service/CustomerService.js
+++ b/src/service/CustomerService.js
@@ -18,7 +18,7 @@ export default class CustomerService {
return axios.get('demo/data/customers-xlarge.json').then(res => res.data.data);
}
- getCustomers() {
- return axios.get('https://www.primefaces.org/data/customers').then(res => res.data.customers)
+ getCustomers(params) {
+ return axios.get('https://www.primefaces.org/data/customers', { params }).then(res => res.data)
}
}
\ No newline at end of file
diff --git a/src/views/datatable/DataTableLazyDemo.vue b/src/views/datatable/DataTableLazyDemo.vue
index 74fcb6a74..16f94a278 100755
--- a/src/views/datatable/DataTableLazyDemo.vue
+++ b/src/views/datatable/DataTableLazyDemo.vue
@@ -12,12 +12,35 @@
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
![]()
+
{{slotProps.option.name}}
+
@@ -27,12 +50,35 @@
-<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" :filters="filters" ref="dt"
+ :totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort">
+ <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 country"/>
+ </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 company"/>
+ </template>
+ </Column>
+ <Column field="representative.name" header="Representative" filterField="representative.name" filterMatchMode="contains" ref="representative.name" :sortable="true">
+ <template #filter>
+ <MultiSelect v-model="filters['representative.name']" :options="representatives" optionLabel="name" optionValue="name" @change="onFilter($event)" placeholder="All" class="p-column-filter">
+ <template #option="slotProps">
+ <div class="p-multiselect-representative-option">
+ <img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
+ <span class="image-text">{{slotProps.option.name}}</span>
+ </div>
+ </template>
+ </MultiSelect>
+ </template>
+ </Column>
</DataTable>
@@ -46,10 +92,28 @@ export default {
return {
loading: false,
totalRecords: 0,
- customers: null
+ customers: null,
+ filters: {},
+ representatives: [
+ {name: "Amy Elsner", image: 'amyelsner.png'},
+ {name: "Anna Fali", image: 'annafali.png'},
+ {name: "Asiya Javayant", image: 'asiyajavayant.png'},
+ {name: "Bernardo Dominic", image: 'bernardodominic.png'},
+ {name: "Elwin Sharvill", image: 'elwinsharvill.png'},
+ {name: "Ioni Bowcher", image: 'ionibowcher.png'},
+ {name: "Ivan Magalhaes",image: 'ivanmagalhaes.png'},
+ {name: "Onyama Limba", image: 'onyamalimba.png'},
+ {name: "Stephen Shaw", image: 'stephenshaw.png'},
+ {name: "XuXue Feng", image: 'xuxuefeng.png'}
+ ],
+ columns: [
+ {field: 'name', header: 'Name', placeholder: 'name', ref: 'name'},
+ {field: 'country.name', header: 'Country', placeholder: 'country', ref: 'country.name'},
+ {field: 'company', header: 'Company', placeholder: 'company', ref: 'company'},
+ {field: 'representative.name', header: 'Representative', placeholder: 'representative', ref: 'representative'}
+ ]
}
},
- datasource: null,
customerService: null,
created() {
this.customerService = new CustomerService();
@@ -57,23 +121,88 @@ export default {
mounted() {
this.loading = true;
- setTimeout(() => {
- this.customerService.getCustomers().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;
+ });
},
methods: {
- onPage(event) {
+ onLazyEvent(event) {
+ const filters = {};
+ const x = JSON.parse(JSON.stringify(this.filters));
+ const y = Object.keys(x);
+
+ for(let i=0; i <this.columns.length; i++) {
+ let obj = {};
+ obj.matchMode = this.$refs[this.columns[i].field].filterMatchMode || "startsWith";
+ for(let j=0; j < y.length; j++) {
+ if(this.columns[i].field === y[j]) {
+ obj.value = this.filters[this.columns[i].field];
+ }
+ else obj.value = null;
+ }
+ filters[this.columns[i].field] = obj;
+ }
+
this.loading = true;
+ let params = {
+ first: event.first,
+ rows: event.rows,
+ sortField: event.sortField,
+ sortOrder: event.sortOrder,
+ filters: filters
+ };
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 filters = {};
+ const x = JSON.parse(JSON.stringify(this.filters));
+ const y = Object.keys(x);
+
+ for(let i=0; i < this.columns.length; i++) {
+ let obj = {};
+ obj.matchMode = this.$refs[this.columns[i].field].filterMatchMode || "startsWith";
+ for(let j=0; j < y.length; j++) {
+ if(this.columns[i].field === y[j]) {
+ obj["value"] = this.filters[this.columns[i].field];
+ }
+ else obj["value"] = null;
+ }
+ filters[this.columns[i].field] = obj;
+ }
+
+ this.loading = true;
+ let params = {
+ first: 0,
+ rows: this.$refs.dt.rows,
+ sortField: null,
+ sortOrder: null,
+ filters: filters
+ };
+
+ setTimeout(() => {
+ this.customerService.getCustomers({lazyEvent: JSON.stringify( params )}).then(data => {
+ this.customers = data.customers;
+ this.totalRecords = data.totalRecords;
+ this.loading = false;
+ });
+ }, 1000);
+ }
}
}
}
@@ -93,10 +222,28 @@ export default {
return {
loading: false,
totalRecords: 0,
- customers: null
+ customers: null,
+ filters: {},
+ representatives: [
+ {name: "Amy Elsner", image: 'amyelsner.png'},
+ {name: "Anna Fali", image: 'annafali.png'},
+ {name: "Asiya Javayant", image: 'asiyajavayant.png'},
+ {name: "Bernardo Dominic", image: 'bernardodominic.png'},
+ {name: "Elwin Sharvill", image: 'elwinsharvill.png'},
+ {name: "Ioni Bowcher", image: 'ionibowcher.png'},
+ {name: "Ivan Magalhaes",image: 'ivanmagalhaes.png'},
+ {name: "Onyama Limba", image: 'onyamalimba.png'},
+ {name: "Stephen Shaw", image: 'stephenshaw.png'},
+ {name: "XuXue Feng", image: 'xuxuefeng.png'}
+ ],
+ columns: [
+ {field: 'name', header: 'Name', placeholder: 'name', ref: 'name'},
+ {field: 'country.name', header: 'Country', placeholder: 'country', ref: 'country.name'},
+ {field: 'company', header: 'Company', placeholder: 'company', ref: 'company'},
+ {field: 'representative.name', header: 'Representative', placeholder: 'representative', ref: 'representative'}
+ ]
}
},
- datasource: null,
customerService: null,
created() {
this.customerService = new CustomerService();
@@ -104,23 +251,90 @@ export default {
mounted() {
this.loading = true;
- setTimeout(() => {
- this.customerService.getCustomers().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;
+ });
},
methods: {
- onPage(event) {
+ onLazyEvent(event) {
+ const filters = {};
+ // proxy to object
+ const x = JSON.parse(JSON.stringify(this.filters));
+ const y = Object.keys(x);
+
+ for(let i=0; i {
- 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 filters = {};
+ // proxy to object
+ const x = JSON.parse(JSON.stringify(this.filters));
+ const y = Object.keys(x);
+
+ for(let i=0; i {
+ this.customerService.getCustomers({lazyEvent: JSON.stringify( params )}).then(data => {
+ this.customers = data.customers;
+ this.totalRecords = data.totalRecords;
+ this.loading = false;
+ });
+ }, 1000);
+ }
}
}
}