Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
This repository was archived by the owner on Jun 10, 2021. It is now read-only.

Commit 06b407a

Browse files
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

Lines changed: 4 additions & 2 deletions
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

Lines changed: 33 additions & 14 deletions
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

Lines changed: 15 additions & 17 deletions
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

Lines changed: 14 additions & 24 deletions
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)

AltStyle によって変換されたページ (->オリジナル) /