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

Improve pagination #54

Merged
merged 4 commits into from
Oct 14, 2017
Merged

Improve pagination #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1adc131
Removed table info, added method for get the pager
coderdiaz Oct 14, 2017
8e1fef5
Fixed pagination now only need the perpage number and total of items
coderdiaz Oct 14, 2017
a1761af
Fixed pagination for only works with total and perpage , now the comp…
coderdiaz Oct 14, 2017
c9a8018
Fixed demo on development
coderdiaz Oct 14, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default {
return (
<div id="app">
<h2 class="text-center mb3">Vue Datasource</h2>
<datasource source={this.information} limits={this.limits} actions={this.actions} columns={this.columns} on-change={this.change}></datasource>
<datasource source={this.information} total={this.total} limits={this.limits} actions={this.actions} columns={this.columns} on-change={this.change}></datasource>
</div>
)
},
Expand Down Expand Up @@ -95,13 +95,15 @@ export default {
page: 1,
perpage: 10,
pagination: {},
search: ''
search: '',
total: 0
}
},
methods: {
getSource () {
axios.get(`https://reqres.in/api/users?per_page=${this.perpage}&page=${this.page}`).then((response) => {
this.information = response.data.data
this.total = response.data.total
})
},
change (value) {
Expand Down
47 changes: 33 additions & 14 deletions src/components/Pagination.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,64 +8,83 @@ export default {
<div class="vue-pagination">
<nav>
<ul class="pagination">
<li class={{disabled: this.pages.current_page === 1}}>
<li class={{disabled: this.currentPage === 1}}>
<a href="#" on-click={(e) => this.firstPage(e)}><span aria-hidden="true">&laquo;&laquo;</span></a>
</li>
<li class={{ disabled: this.pages.current_page === 1 }}>
<li class={{ disabled: this.currentPage === 1 }}>
<a href="#" on-click={(e) => this.previous(e)}><span aria-hidden="true">&laquo;</span></a>
</li>
{this.paginationItems}
<li class={{disabled: this.pages.current_page === this.pages.last_page}}>
<li class={{disabled: this.currentPage === this.lastPage}}>
<a href="#" on-click={(e) => this.next(e)}><span aria-hidden="true">&raquo;</span></a>
</li>
<li class={{ disabled: this.pages.current_page === this.pages.last_page }}>
<a href="#" on-click={(e) => this.lastPage(e, this.pages.last_page)}><span aria-hidden="true">&raquo;&raquo;</span></a>
<li class={{ disabled: this.currentPage === this.lastPage }}>
<a href="#" on-click={(e) => this.goTolastPage(e, this.lastPage)}><span aria-hidden="true">&raquo;&raquo;</span></a>
</li>
</ul>
</nav>
</div>
)
},
props: ['pages'],
props: {
total: {
type: Number,
default: 0
},
perPage: {
type: Number,
default: 0
}
},
created () {
window.addEventListener('keyup', ({key}) => this.changePageWithKeyBoard(key))
},
data () {
return {
currentPage: 1
}
},
computed: {
items: DatasourceUtils.gettingItems,
paginationItems () {
return this.items.map((item, index) => {
return <li class={{active: (this.pages.current_page === item)}}>
return <li class={{active: (this.currentPage === item)}}>
<a href="#" on-click={(e) => this.change(e, item)}>{item}</a>
</li>
})
},
lastPage () {
if (this.total === 0) return 1
return parseInt(((this.total - 1) / this.perPage) + 1)
}
},
methods: {
firstPage (e) {
e.preventDefault()
if (this.pages.current_page !== 1) {
if (this.currentPage !== 1) {
this.change(e, 1)
}
},
previous (e) {
e.preventDefault()
if (this.pages.current_page !== 1) {
this.change(e, --this.pages.current_page)
if (this.currentPage !== 1) {
this.change(e, --this.currentPage)
}
},
change (e, page) {
e.preventDefault()
this.currentPage = page
EventBus.$emit('pagination-change', page)
},
next (e) {
e.preventDefault()
if (this.pages.current_page !== this.pages.last_page) {
this.change(e, ++this.pages.current_page)
if (this.currentPage !== this.lastPage) {
this.change(e, ++this.currentPage)
}
},
lastPage (e, page) {
goTolastPage (e, page) {
e.preventDefault()
if (this.pages.current_page !== this.pages.last_page) {
if (this.currentPage !== this.lastPage) {
this.change(e, page)
}
},
Expand Down
32 changes: 15 additions & 17 deletions src/components/ServerDatasource.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script>
import DatasourceUtils from '../utils/DatasourceUtils'
import Pagination from './Pagination.vue'
import Pagination from './Pagination'
import {EventBus} from '../utils/EventBus'
export default {
name: 'ServerDatasource',
Expand Down Expand Up @@ -32,9 +32,6 @@ export default {
</thead>
<tbody>
{this.columnObjects}
<tr>
<td class="text-center warning" colspan={this.columns.length}>{this.tableInfo}</td>
</tr>
</tbody>
</table>
</div>
Expand All @@ -43,7 +40,7 @@ export default {
{this.actionsObject}
</div>
<div class="pull-right">
<pagination pages={this.pagination}></pagination>
<pagination total={this.total} per-page={this.perpage}></pagination>
</div>
<div class="clearfix"></div>
</div>
Expand All @@ -60,6 +57,14 @@ export default {
type: Array,
required: true
},
/**
* Total of items
* @type {Number}
*/
total: {
type: Number,
required: true
},
/**
* Limits to display
* @type {Array}
Expand Down Expand Up @@ -116,16 +121,10 @@ export default {
data () {
return {
perpage: 10,
current_page: 1,
selected: null, // row and Object selected on click event
indexSelected: -1, // index row selected on click event
search: '', // word to search in the table,
pagination: {
total: 0,
to: 0,
from: 0,
per_page: 10,
current_page: 1
}
search: '' // word to search in the table,
}
},
computed: {
Expand Down Expand Up @@ -166,8 +165,7 @@ export default {
console.warn(`[VueDatasource] The callback show is not defined in action ${action.text}.`)
}
})
},
tableInfo: DatasourceUtils.tableInfo
}
},
methods: {
fetchFromObject: DatasourceUtils.fetchFromObject,
Expand All @@ -182,7 +180,7 @@ export default {
searching (e) {
this.selected = null
this.indexSelected = -1
this.pagination.current_page = 1
this.current_page = 1
this.$emit('searching', e.target.value)
}
},
Expand All @@ -194,7 +192,7 @@ export default {
perpage () {
this.selected = null
this.indexSelected = -1
this.pagination.current_page = 1
this.current_page = 1
this.$emit('change', {perpage: this.perpage, page: 1})
},
source () {
Expand Down
38 changes: 14 additions & 24 deletions src/utils/DatasourceUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default {
changePage (page) {
this.selected = null
this.indexSelected = -1
this.pagination.current_page = page
this.current_page = page
this.$emit('change', { perpage: this.perpage, page: page })
},

Expand All @@ -50,50 +50,40 @@ export default {
}
},

/**
* Computed property: Building custom string information with translation
* @returns {String}
*/
tableInfo () {
let labelShow = this.translation.pagination.show
let from = (this.pagination.from === null) ? 0 : this.pagination.from
let labelTo = this.translation.pagination.to
let to = (this.pagination.to === null) ? 0 : this.pagination.to
let labelOf = this.translation.pagination.of
let total = this.pagination.total
let labelEntries = this.translation.pagination.entries
return `${labelShow} ${from} ${labelTo} ${to} ${labelOf} ${total} ${labelEntries}`
},

/**
* Computed property: Build custom array with the pagination items
* @return Array
*/
gettingItems () {
let temp = []
let bottomLimit = this.pages.current_page - 2
let topLimit = this.pages.current_page + 2
let bottomLimit = this.currentPage - 2
let topLimit = this.currentPage + 2
let showing = 5
if (bottomLimit <= 0) {
bottomLimit = 1
topLimit = 5
}
if (topLimit >= this.pages.last_page) {
bottomLimit = this.pages.last_page - 4
topLimit = this.pages.last_page
if (topLimit >= this.lastPage) {
bottomLimit = this.lastPage - 4
topLimit = this.lastPage
}
if (this.pages.last_page < 5) {
showing = this.pages.last_page
if (this.lastPage < 5) {
showing = this.lastPage
}
if (bottomLimit <= 0) {
bottomLimit = 1
}
if (this.pages.last_page === 0 || this.pages.last_page === 1) {
if (this.lastPage === 0 || this.lastPage === 1) {
showing = 1
}
for (let i = 0; i < showing; i++) {
temp[i] = i + bottomLimit
}
return temp
},

roundNumber (value, precision) {
let multiplier = Math.pow(10, precision || 0)
return Math.round(value * multiplier) / multiplier
}
}