Skip to content
This repository was archived by the owner on Jun 10, 2021. It is now read-only.

Commit 06b407a

Browse files
coderdiazcoderdiaz
authored
Merge pull request #54 from coderdiaz/improve-pagination
Improve pagination
2 parents aa56829 + c9a8018 commit 06b407a

File tree

4 files changed

+66
-57
lines changed

4 files changed

+66
-57
lines changed

‎src/App.vue

+4-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default {
1313
return (
1414
<div id="app">
1515
<h2 class="text-center mb3">Vue Datasource</h2>
16-
<datasource source={this.information} limits={this.limits} actions={this.actions} columns={this.columns} on-change={this.change}></datasource>
16+
<datasource source={this.information} total={this.total} limits={this.limits} actions={this.actions} columns={this.columns} on-change={this.change}></datasource>
1717
</div>
1818
)
1919
},
@@ -95,13 +95,15 @@ export default {
9595
page: 1,
9696
perpage: 10,
9797
pagination: {},
98-
search: ''
98+
search: '',
99+
total: 0
99100
}
100101
},
101102
methods: {
102103
getSource () {
103104
axios.get(`https://reqres.in/api/users?per_page=${this.perpage}&page=${this.page}`).then((response) => {
104105
this.information = response.data.data
106+
this.total = response.data.total
105107
})
106108
},
107109
change (value) {

‎src/components/Pagination.vue

+33-14
Original file line numberDiff line numberDiff line change
@@ -8,64 +8,83 @@ export default {
88
<div class="vue-pagination">
99
<nav>
1010
<ul class="pagination">
11-
<li class={{disabled: this.pages.current_page === 1}}>
11+
<li class={{disabled: this.currentPage === 1}}>
1212
<a href="#" on-click={(e) => this.firstPage(e)}><span aria-hidden="true">&laquo;&laquo;</span></a>
1313
</li>
14-
<li class={{ disabled: this.pages.current_page === 1 }}>
14+
<li class={{ disabled: this.currentPage === 1 }}>
1515
<a href="#" on-click={(e) => this.previous(e)}><span aria-hidden="true">&laquo;</span></a>
1616
</li>
1717
{this.paginationItems}
18-
<li class={{disabled: this.pages.current_page === this.pages.last_page}}>
18+
<li class={{disabled: this.currentPage === this.lastPage}}>
1919
<a href="#" on-click={(e) => this.next(e)}><span aria-hidden="true">&raquo;</span></a>
2020
</li>
21-
<li class={{ disabled: this.pages.current_page === this.pages.last_page }}>
22-
<a href="#" on-click={(e) => this.lastPage(e, this.pages.last_page)}><span aria-hidden="true">&raquo;&raquo;</span></a>
21+
<li class={{ disabled: this.currentPage === this.lastPage }}>
22+
<a href="#" on-click={(e) => this.goTolastPage(e, this.lastPage)}><span aria-hidden="true">&raquo;&raquo;</span></a>
2323
</li>
2424
</ul>
2525
</nav>
2626
</div>
2727
)
2828
},
29-
props: ['pages'],
29+
props: {
30+
total: {
31+
type: Number,
32+
default: 0
33+
},
34+
perPage: {
35+
type: Number,
36+
default: 0
37+
}
38+
},
3039
created () {
3140
window.addEventListener('keyup', ({key}) => this.changePageWithKeyBoard(key))
3241
},
42+
data () {
43+
return {
44+
currentPage: 1
45+
}
46+
},
3347
computed: {
3448
items: DatasourceUtils.gettingItems,
3549
paginationItems () {
3650
return this.items.map((item, index) => {
37-
return <li class={{active: (this.pages.current_page === item)}}>
51+
return <li class={{active: (this.currentPage === item)}}>
3852
<a href="#" on-click={(e) => this.change(e, item)}>{item}</a>
3953
</li>
4054
})
55+
},
56+
lastPage () {
57+
if (this.total === 0) return 1
58+
return parseInt(((this.total - 1) / this.perPage) + 1)
4159
}
4260
},
4361
methods: {
4462
firstPage (e) {
4563
e.preventDefault()
46-
if (this.pages.current_page !== 1) {
64+
if (this.currentPage !== 1) {
4765
this.change(e, 1)
4866
}
4967
},
5068
previous (e) {
5169
e.preventDefault()
52-
if (this.pages.current_page !== 1) {
53-
this.change(e, --this.pages.current_page)
70+
if (this.currentPage !== 1) {
71+
this.change(e, --this.currentPage)
5472
}
5573
},
5674
change (e, page) {
5775
e.preventDefault()
76+
this.currentPage = page
5877
EventBus.$emit('pagination-change', page)
5978
},
6079
next (e) {
6180
e.preventDefault()
62-
if (this.pages.current_page !== this.pages.last_page) {
63-
this.change(e, ++this.pages.current_page)
81+
if (this.currentPage !== this.lastPage) {
82+
this.change(e, ++this.currentPage)
6483
}
6584
},
66-
lastPage (e, page) {
85+
goTolastPage (e, page) {
6786
e.preventDefault()
68-
if (this.pages.current_page !== this.pages.last_page) {
87+
if (this.currentPage !== this.lastPage) {
6988
this.change(e, page)
7089
}
7190
},

‎src/components/ServerDatasource.vue

+15-17
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script>
22
import DatasourceUtils from '../utils/DatasourceUtils'
3-
import Pagination from './Pagination.vue'
3+
import Pagination from './Pagination'
44
import {EventBus} from '../utils/EventBus'
55
export default {
66
name: 'ServerDatasource',
@@ -32,9 +32,6 @@ export default {
3232
</thead>
3333
<tbody>
3434
{this.columnObjects}
35-
<tr>
36-
<td class="text-center warning" colspan={this.columns.length}>{this.tableInfo}</td>
37-
</tr>
3835
</tbody>
3936
</table>
4037
</div>
@@ -43,7 +40,7 @@ export default {
4340
{this.actionsObject}
4441
</div>
4542
<div class="pull-right">
46-
<pagination pages={this.pagination}></pagination>
43+
<pagination total={this.total} per-page={this.perpage}></pagination>
4744
</div>
4845
<div class="clearfix"></div>
4946
</div>
@@ -60,6 +57,14 @@ export default {
6057
type: Array,
6158
required: true
6259
},
60+
/**
61+
* Total of items
62+
* @type {Number}
63+
*/
64+
total: {
65+
type: Number,
66+
required: true
67+
},
6368
/**
6469
* Limits to display
6570
* @type {Array}
@@ -116,16 +121,10 @@ export default {
116121
data () {
117122
return {
118123
perpage: 10,
124+
current_page: 1,
119125
selected: null, // row and Object selected on click event
120126
indexSelected: -1, // index row selected on click event
121-
search: '', // word to search in the table,
122-
pagination: {
123-
total: 0,
124-
to: 0,
125-
from: 0,
126-
per_page: 10,
127-
current_page: 1
128-
}
127+
search: '' // word to search in the table,
129128
}
130129
},
131130
computed: {
@@ -166,8 +165,7 @@ export default {
166165
console.warn(`[VueDatasource] The callback show is not defined in action ${action.text}.`)
167166
}
168167
})
169-
},
170-
tableInfo: DatasourceUtils.tableInfo
168+
}
171169
},
172170
methods: {
173171
fetchFromObject: DatasourceUtils.fetchFromObject,
@@ -182,7 +180,7 @@ export default {
182180
searching (e) {
183181
this.selected = null
184182
this.indexSelected = -1
185-
this.pagination.current_page = 1
183+
this.current_page = 1
186184
this.$emit('searching', e.target.value)
187185
}
188186
},
@@ -194,7 +192,7 @@ export default {
194192
perpage () {
195193
this.selected = null
196194
this.indexSelected = -1
197-
this.pagination.current_page = 1
195+
this.current_page = 1
198196
this.$emit('change', {perpage: this.perpage, page: 1})
199197
},
200198
source () {

‎src/utils/DatasourceUtils.js

+14-24
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export default {
2626
changePage (page) {
2727
this.selected = null
2828
this.indexSelected = -1
29-
this.pagination.current_page = page
29+
this.current_page = page
3030
this.$emit('change', { perpage: this.perpage, page: page })
3131
},
3232

@@ -50,50 +50,40 @@ export default {
5050
}
5151
},
5252

53-
/**
54-
* Computed property: Building custom string information with translation
55-
* @returns {String}
56-
*/
57-
tableInfo () {
58-
let labelShow = this.translation.pagination.show
59-
let from = (this.pagination.from === null) ? 0 : this.pagination.from
60-
let labelTo = this.translation.pagination.to
61-
let to = (this.pagination.to === null) ? 0 : this.pagination.to
62-
let labelOf = this.translation.pagination.of
63-
let total = this.pagination.total
64-
let labelEntries = this.translation.pagination.entries
65-
return `${labelShow} ${from} ${labelTo} ${to} ${labelOf} ${total} ${labelEntries}`
66-
},
67-
6853
/**
6954
* Computed property: Build custom array with the pagination items
7055
* @return Array
7156
*/
7257
gettingItems () {
7358
let temp = []
74-
let bottomLimit = this.pages.current_page - 2
75-
let topLimit = this.pages.current_page + 2
59+
let bottomLimit = this.currentPage - 2
60+
let topLimit = this.currentPage + 2
7661
let showing = 5
7762
if (bottomLimit <= 0) {
7863
bottomLimit = 1
7964
topLimit = 5
8065
}
81-
if (topLimit >= this.pages.last_page) {
82-
bottomLimit = this.pages.last_page - 4
83-
topLimit = this.pages.last_page
66+
if (topLimit >= this.lastPage) {
67+
bottomLimit = this.lastPage - 4
68+
topLimit = this.lastPage
8469
}
85-
if (this.pages.last_page < 5) {
86-
showing = this.pages.last_page
70+
if (this.lastPage < 5) {
71+
showing = this.lastPage
8772
}
8873
if (bottomLimit <= 0) {
8974
bottomLimit = 1
9075
}
91-
if (this.pages.last_page === 0 || this.pages.last_page === 1) {
76+
if (this.lastPage === 0 || this.lastPage === 1) {
9277
showing = 1
9378
}
9479
for (let i = 0; i < showing; i++) {
9580
temp[i] = i + bottomLimit
9681
}
9782
return temp
83+
},
84+
85+
roundNumber (value, precision) {
86+
let multiplier = Math.pow(10, precision || 0)
87+
return Math.round(value * multiplier) / multiplier
9888
}
9989
}

0 commit comments

Comments
 (0)