/
pagination.html
151 lines (141 loc) · 5.03 KB
/
pagination.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<v-app>
<v-content>
<v-card>
<v-container grid-list-sm fluid>
<v-layout row wrap align-center>
<!-- Order selection - Randpm, Descending, or Ascending -->
<v-flex xs6>
<v-select :items="['Rand', 'Desc','Asc']"
v-model="order"
label="Order"
attach>
</v-select>
</v-flex>
</v-layout>
<v-layout row wrap>
<!-- for loop through the results from the API -->
<v-flex
v-for="n in images"
:§="n.id"
xs4
d-flex>
<v-card
color="grey lighten-4"
flat tile class="d-flex">
<v-img
:src="n.url"
lazy-src="https://picsum.photos/10/6"
class="grey lighten-2"
aspect-ratio="1">
</v-img>
</v-card>
</v-flex>
</v-layout>
<br>
<!-- Pagination control -->
<v-layout wrap align-center>
<v-flex xs11>
<v-card-title primary-title>
<div>Page</div>
</v-card-title>
<v-pagination xs9
v-show="order!='Rand'"
v-model="page"
:length="getNumPages"
></v-pagination>
</v-flex>
</v-layout>
<v-layout wrap align-center>
<v-flex xs4>
<v-select :items="[3,6,9]"
v-model="limit"
label="Limit"
attach></v-select>
</v-flex>
<!-- Next btn only shown when Rand is select as it can't be paginated -->
<v-flex xs6>
<v-btn color="blue" v-show="order=='Rand'" large @click="nextBtn">
<v-icon>refresh</v-icon> More
</v-btn>
</v-flex>
</v-layout>
</v-container>
</v-card>
</v-content>
</v-app>
</div>
<script>
new Vue({
el: '#app',
data: {
images: [],
order:'Desc',
page: 100,
limit: 3,
pagination_count: 0, //default until we get a result with the 'Pagination-Count' header in the response
},
created(){
this.getImages();
} ,
watch: {
// if the user changes any of these values, then make a new request to the API
page: function()
{
this.getImages();
},
limit: function()
{
this.getImages();
},
order: function()
{
this.getImages();
}
},
computed:{
getNumPages: function()
{
return Math.floor(this.pagination_count / this.limit) | 0;
}
},
methods:{
async nextBtn()
{
this.page++;
await this.getImages();
},
async getImages()
{
try{
axios.defaults.headers.common['x-api-key'] = "DEMO-API-KEY" // Replace this with your API Key
let query_params = {
limit: this.limit,
order: this.order,
page: this.page-1,
}
let response = await axios.get('https://api.thecatapi.com/v1/images/search', { params: query_params } )
this.pagination_count = response.headers['pagination-count'];
this.images = response.data
console.log("-- ("+this.images.length +") Images from TheCatAPI.com")
console.log( this.pagination_count ,'images available for this query.')
}catch(err){
console.log(err)
}
}
}
})
</script>
</body>
</html>