Skip to content

Commit c471e12

Browse files
poushpoush
committed
Intial Commit
0 parents  commit c471e12

File tree

6 files changed

+232
-0
lines changed

6 files changed

+232
-0
lines changed

‎.gitignore‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/.idea
2+
3+
# Mac stuff
4+
.DS_Store
5+
.AppleDouble
6+
.LSOverride
7+
._*
8+
.DocumentRevisions-V100
9+
.fseventsd
10+
.Spotlight-V100
11+
.TemporaryItems
12+
.Trashes
13+
.VolumeIcon.icns

‎LICENSE.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License
2+
3+
Copyright (c) 2016 pogachar
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.

‎README.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# vue-pagination
2+
Vue pagination component for use with Bootstrap and Laravel pagination.
3+
4+
* [Vue.js](http://vuejs.org/) (tested with 1.0.16).
5+
* [Bootstrap CSS](http://getbootstrap.com/) (tested with 3.3.6)
6+
7+
All it requires to work is this object and a callback function
8+
9+
10+
### Example
11+
```js
12+
pagination: {
13+
total: 0,
14+
per_page: 12,
15+
current_page: 1,
16+
total_pages: 10
17+
}
18+
```
19+
20+
```html
21+
22+
<pagination :pagination="pagination" navClass="anyclass" size="pagination-sm" :callback="loadData" :offset="3"></pagination>
23+
24+
will gerenate like
25+
26+
<nav class="anyclass">
27+
<ul class="pagination pagination-sm">
28+
<li>
29+
...
30+
</li>
31+
</ul>
32+
</nav>
33+
34+
```
35+
36+
#### Options
37+
| Name | Type | Default | Required | Description
38+
| :------------ | :--------| :-------| :--------| :-----------
39+
| pagination | Object | | true | Pagination object used to create pagination
40+
| callback | Function | | true | Callback function used to load data for selected page
41+
| offset | Number | 4 | false | Left and right offset of pagination numbers to display
42+
| navClass | String | | false | Assign a class to your nav element of pagination
43+
| size | String | | false | Give bootstrap or custom class for sizing your pagination
44+
45+
46+
I will update more info soon...
47+

‎bower.json‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "vue-paginate",
3+
"description": "Pagination for vuejs with combination with bootstrap and Laravel's pagination",
4+
"main": "paginate.js",
5+
"authors": [
6+
"poush"
7+
],
8+
"license": "MIT",
9+
"keywords": [
10+
"vue",
11+
"component",
12+
"bootstrap",
13+
"laravel",
14+
"pagination"
15+
],
16+
"homepage": "https://github.com/poush/vue-paginate",
17+
"moduleType": [],
18+
"ignore": [
19+
"**/.*",
20+
"node_modules",
21+
"bower_components",
22+
"test",
23+
"tests",
24+
"src"
25+
]
26+
}

‎package.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "vue-paginate",
3+
"version": "1.0.0",
4+
"description": "Pagination for vuejs with combination with bootstrap works with any serverside framework",
5+
"main": "paginate.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"files": [
10+
"paginate.js"
11+
],
12+
"homepage": "https://github.com/poush/vue-paginate",
13+
"keywords": [
14+
"vue",
15+
"component",
16+
"bootstrap",
17+
"laravel",
18+
"pagination"
19+
],
20+
"dependencies": {},
21+
"author": "poush",
22+
"license": "MIT"
23+
}

‎paginate.js‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
module.exports = {
2+
template: '<nav class=" {{navClass}} ">' +
3+
'<ul class="pagination {{size}} ">' +
4+
'<li v-if="pagination.current_page > 1">' +
5+
'<a href="#" aria-label="Previous" @click.prevent="changePage(1)">' +
6+
'<span aria-hidden="true">First</span>' +
7+
'</a>' +
8+
'</li>' +
9+
'<li v-if="pagination.current_page > 1">' +
10+
'<a href="#" aria-label="Previous" @click.prevent="changePage(pagination.current_page - 1)">' +
11+
'<span aria-hidden="true">&laquo;</span>' +
12+
'</a>' +
13+
'</li>' +
14+
'<li v-if="pagination.current_page > 1">' +
15+
'<a href="#" aria-label="Next" @click.prevent="changePage(from)">' +
16+
'<span aria-hidden="true">...</span>' +
17+
'</a>' +
18+
'</li>' +
19+
'<li v-for="num in data" :class="{\'active\': num == pagination.current_page}">' +
20+
'<a href="#" @click.prevent="changePage(num)">{{ num }}</a>' +
21+
'</li>' +
22+
'<li v-if="pagination.current_page < pagination.total_pages">' +
23+
'<a href="#" aria-label="Next" @click.prevent="changePage(to)">' +
24+
'<span aria-hidden="true">...</span>' +
25+
'</a>' +
26+
'</li>' +
27+
'<li v-if="pagination.current_page < pagination.total_pages">' +
28+
'<a href="#" aria-label="Next" @click.prevent="changePage(pagination.current_page + 1)">' +
29+
'<span aria-hidden="true">&raquo;</span>' +
30+
'</a>' +
31+
'</li>' +
32+
'<li v-if="pagination.current_page < pagination.total_pages">' +
33+
'<a href="#" aria-label="Next" @click.prevent="changePage(pagination.total_pages)">' +
34+
'<span aria-hidden="true">Last</span>' +
35+
'</a>' +
36+
'</li>' +
37+
'</ul>' +
38+
'</nav>',
39+
40+
data: function(){
41+
return {
42+
to : 0,
43+
from: 0
44+
}
45+
},
46+
props: {
47+
pagination: {
48+
type: Object,
49+
required: true
50+
},
51+
callback: {
52+
type: Function,
53+
required: true
54+
},
55+
size: {
56+
type: String,
57+
default: ""
58+
},
59+
navClass: {
60+
type: String,
61+
default: ""
62+
},
63+
offset: {
64+
type: Number,
65+
default: 4
66+
}
67+
},
68+
computed: {
69+
data: function () {
70+
var from = this.pagination.current_page - this.offset;
71+
if(from < 1) {
72+
from = 1;
73+
}
74+
75+
var to = from + (this.offset * 2);
76+
if(to >= this.pagination.total_pages) {
77+
to = this.pagination.total_pages;
78+
}
79+
this.from = from;
80+
this.to = to;
81+
82+
var arr = [];
83+
while (from <=to) {
84+
arr.push(from);
85+
from++;
86+
}
87+
88+
return arr;
89+
}
90+
},
91+
watch: {
92+
'pagination.per_page': function () {
93+
this.callback();
94+
}
95+
},
96+
methods: {
97+
changePage: function (page) {
98+
this.$set('pagination.current_page', page);
99+
this.callback();
100+
}
101+
}
102+
};

0 commit comments

Comments
 (0)