vue-pagination-bootstrap
Advanced tools
Comparing version 1.0.2 to 1.0.3
22
index.js
| export default { | ||
| template: `<nav> | ||
| <ul class="pagination justify-content-center"> | ||
| <li v-if="showPrevious()" :class="{ 'disabled' : currentPage <= 1 }" class="page-item"> | ||
| template: `<nav :class="[navClass]"> | ||
| <ul class="pagination justify-content-center" :class="[ulClass]"> | ||
| <li v-if="showPrevious()" :class="[liClass, { 'disabled' : currentPage <= 1 }]" class="page-item"> | ||
| <a class="page-link" href="#" v-if="currentPage <= 1"> | ||
@@ -12,6 +12,6 @@ <span aria-hidden="true">{{ config.previousText }}</span> | ||
| </li> | ||
| <li v-for="num in array" :class="{ 'active': num === currentPage }" class="page-item"> | ||
| <li v-for="num in array" :class="[liClass, { 'active': num === currentPage }]" class="page-item"> | ||
| <a class="page-link" href="#" @click.prevent="changePage(num)">{{ num }}</a> | ||
| </li> | ||
| <li v-if="showNext()" :class="{ 'disabled' : currentPage === lastPage || lastPage === 0 }" class="page-item"> | ||
| <li v-if="showNext()" :class="[liClass, { 'disabled' : currentPage === lastPage || lastPage === 0 }]" class="page-item"> | ||
| <a class="page-link" href="#" v-if="currentPage === lastPage || lastPage === 0"> | ||
@@ -42,2 +42,14 @@ <span aria-hidden="true">{{ config.nextText }}</span> | ||
| }, | ||
| navClass:{ | ||
| type: String, | ||
| default: "" | ||
| }, | ||
| ulClass:{ | ||
| type: String, | ||
| default: "" | ||
| }, | ||
| liClass:{ | ||
| type: String, | ||
| default: "" | ||
| } | ||
| }, | ||
@@ -44,0 +56,0 @@ data() { |
| { | ||
| "name": "vue-pagination-bootstrap", | ||
| "version": "1.0.2", | ||
| "version": "1.0.3", | ||
| "description": "Server-side paging component in vue, template based on bootstrap", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
| # vue-pagination-bootstrap | ||
| Server-side paging component in vue, template based on bootstrap | ||
| * [Vue.js](http://vuejs.org/) (tested with 1.x & 2.x) | ||
| * [Bootstrap CSS](http://getbootstrap.com/) (tested with 3.x & 4.x) | ||
| * [Vue.js](http://vuejs.org/) (tested with 2.x) | ||
| * [Bootstrap CSS](http://getbootstrap.com/) (tested with 4.x) | ||
@@ -18,4 +18,4 @@ ### Installation | ||
| new Vue({ | ||
| el: '#app', | ||
| components: { pagination }, | ||
| el: '#app',, | ||
| components: { pagination } | ||
| data () { | ||
@@ -26,3 +26,3 @@ return { | ||
| paginationOptions: { // Not required to pass this configurations | ||
| offset: 2, | ||
| offset: 2, | ||
| previousText: 'Prev', | ||
@@ -36,4 +36,4 @@ nextText: 'Next', | ||
| pageChanged (page) { | ||
| console.log(page) | ||
| // Exec your response to server passing 'page' params as clicked button paging | ||
| console.log(page) | ||
| // Exec your response to server passing 'page' params as clicked button paging | ||
| } | ||
@@ -46,3 +46,4 @@ } | ||
| <body id="app"> | ||
| <pagination :total="total" :page-size="pageSize" :callback="pageChanged" :options="paginationOptions"></pagination> | ||
| <pagination :total="total" :page-size="pageSize" :callback="pageChanged" :options="paginationOptions" nav-class="padding-10" ul-class="bg-color-red" li-class="txt-color-blue"> | ||
| </pagination> | ||
| </body> | ||
@@ -54,6 +55,8 @@ ``` | ||
| | :------------ | :--------| :-------| :--------| :----------- | ||
| | total | Number | | true | Total items in server side | ||
| | pageSize | Number | | true | Number of items in page | ||
| | callback | Function | | true | Callback function used to load data for the selected page | ||
| | options | Object | | false | An configuration object to overwrite the defaults [options](#options) of the pagination | ||
| | total | Number | | true | Total itens in server side | ||
| | pageSize | Number | | true | Number of itens in page | ||
| | callback | Function | | true | Callback function used to load data for selected page | ||
| | nav-class | String | | false | Class will be include in nav element | ||
| | ul-class | String | | false | Class will be include in ul element | ||
| | li-class | String | | false | Class will be include in all li element | ||
@@ -60,0 +63,0 @@ ##### Options |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by7.95%
6976
- Lines of code
- increased by12.77%
106
- Number of lines in readme file
- increased by4.69%
67
No dependency changes