diff --git a/src/components/dataview/DataView.vue b/src/components/dataview/DataView.vue
index 63723a7a7..405596630 100644
--- a/src/components/dataview/DataView.vue
+++ b/src/components/dataview/DataView.vue
@@ -3,8 +3,8 @@
-
+
@@ -14,15 +14,15 @@
-
-
-
+
+
+
{{emptyMessage}}
-
+
@@ -49,7 +49,7 @@
},
rows: {
type: Number,
- default: null
+ default: 0
},
first: {
type: Number,
@@ -57,7 +57,7 @@
},
totalRecords: {
type: Number,
- default: null
+ default: 0
},
paginator: {
type: Boolean,
@@ -73,7 +73,7 @@
},
paginatorTemplate: {
type: String,
- default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'
+ default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'
},
pageLinkSize: {
type: Number,
@@ -98,29 +98,31 @@
sortOrder: {
type: Number,
default: null
- },
- lazy: {
- type: Boolean,
- default: false
}
- },
- data() {
- return {
- firstRecord: this.first ? this.first : 0
- }
- },
+ },
+ data() {
+ return {
+ d_first: this.first,
+ d_rows: this.rows
+ }
+ },
+ watch: {
+ first(newValue) {
+ this.d_first = newValue;
+ },
+ rows(newValue) {
+ this.d_rows = newValue;
+ }
+ },
methods: {
- processData() {
- let data = this.value;
+ onPage(event) {
+ this.d_first = event.first;
+ this.d_rows = event.rows;
- if (data && data.length) {
- if (this.sortField) {
- data = this.sort();
- }
- }
-
- return data;
- },
+ this.$emit('update:first', this.d_first);
+ this.$emit('update:rows', this.d_rows);
+ this.$emit('page', event);
+ },
sort() {
if (this.value) {
const value = [...this.value];
@@ -153,11 +155,11 @@
},
computed: {
containerClass() {
- return ['p-dataview p-component', {
- 'p-dataview-list': (this.layout === 'list'),
- 'p-dataview-grid': (this.layout === 'grid')
- }
- ]
+ return ['p-dataview p-component', {
+ 'p-dataview-list': (this.layout === 'list'),
+ 'p-dataview-grid': (this.layout === 'grid')
+ }
+ ]
},
getTotalRecords() {
if (this.totalRecords)
@@ -169,40 +171,36 @@
return (!this.value || this.value.length === 0);
},
paginatorTop() {
- if(this.paginatorPosition && (this.paginatorPosition !== 'bottom' || this.paginatorPosition === 'both')) {
+ if (this.paginatorPosition && (this.paginatorPosition !== 'bottom' || this.paginatorPosition === 'both')) {
return true
}
else
return null;
},
paginatorBottom() {
- if(this.paginatorPosition && (this.paginatorPosition !== 'top' || this.paginatorPosition === 'both')) {
+ if (this.paginatorPosition && (this.paginatorPosition !== 'top' || this.paginatorPosition === 'both')) {
return true
}
else
return null;
- },
- templateItems (){
- let value = this.processData();
+ },
+ items() {
+ if (this.value && this.value.length) {
+ let data = this.value;
- if (value && value.length) {
- if (this.paginator) {
- const rows = this.rows;
- const first = this.lazy ? 0 : this.firstRecord;
- const last = rows + first;
- let items = [];
-
- for (let i = first; i < last; i++) {
- items.push(value[i]);
- }
- return items;
- }
- else {
- return value;
- }
- }
- else return null;
- }
+ if (data && data.length && this.sortField) {
+ data = this.sort();
+ }
+
+ if (this.paginator)
+ return data.slice(this.d_first, this.d_first + this.d_rows);
+ else
+ return data;
+ }
+ else {
+ return null;
+ }
+ }
}
}
\ No newline at end of file
diff --git a/src/components/dataview/DataViewLayoutOptions.vue b/src/components/dataview/DataViewLayoutOptions.vue
index b486cef5b..dda1514f1 100644
--- a/src/components/dataview/DataViewLayoutOptions.vue
+++ b/src/components/dataview/DataViewLayoutOptions.vue
@@ -1,40 +1,38 @@
-
+