Skip to content

Commit 74b1188

Browse files
coderdiazcoderdiaz
committed
Implementing table data with tiny paginator
1 parent 12f2416 commit 74b1188

File tree

1 file changed

+119
-60
lines changed

1 file changed

+119
-60
lines changed

‎src/App.vue

Lines changed: 119 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
<div id="app">
33
<section class="section-hero">
44
<div class="grid-hero container grid-lg text-center">
5-
<img src="https://vuejs.org/images/logo.png">
5+
<img src="https://vuejs.org/images/logo.png" width="150">
66
<h1>&lt;vue-tiny-pagination /&gt;</h1>
77
<h2>a Vue component for create a <u>tiny</u> pagination</h2>
88
<p class="text-gray">
9-
<a href="https://github.com/coderdiaz/vue-tiny-pagination" target="_blank">GitHub</a> | Latest version: <span class="version">0.1.0</span>
9+
<a href="https://github.com/coderdiaz/vue-tiny-pagination" target="_blank">GitHub</a> | Latest version: <span class="version"></span>
1010
</p>
1111
</div>
1212
</section>
@@ -59,7 +59,36 @@
5959
}
6060
})</code></pre>
6161
<br>
62-
<h2>Example</h2>
62+
<h2>Basic Example</h2>
63+
<div class="panel">
64+
<div class="panel-body custom-panel">
65+
<table class="table table-hover">
66+
<thead>
67+
<tr>
68+
<th>Id</th>
69+
<th>First Name</th>
70+
<th>Last name</th>
71+
<th></th>
72+
</tr>
73+
</thead>
74+
<tbody v-if="users">
75+
<tr v-for="user in users" :key="user.id">
76+
<td>{{user.id}}</td>
77+
<td>{{user.first_name}}</td>
78+
<td>{{user.last_name}}</td>
79+
<td>
80+
<figure class="avatar avatar-xl">
81+
<img :src="user.avatar" :alt="user.first_name">
82+
</figure>
83+
</td>
84+
</tr>
85+
</tbody>
86+
</table>
87+
</div>
88+
</div>
89+
<br>
90+
<div class="divider text-center" data-content="PAGINATION"></div>
91+
<br>
6392
<div class="pagination centered bg-primary">
6493
<tiny-pagination
6594
:total="currentTotal"
@@ -74,72 +103,82 @@
74103
<br>
75104
<h2>Documentation</h2>
76105
<h5>Props</h5>
77-
<table class="table table-stripe">
78-
<thead>
79-
<tr>
80-
<th>Prop</th>
81-
<th>Type</th>
82-
<th>Default</th>
83-
<th>Description</th>
84-
</tr>
85-
</thead>
86-
<tbody>
87-
<tr>
88-
<td>total <i>(required)</i></td>
89-
<td>Number</td>
90-
<td>-</td>
91-
<td>A number of total items.</td>
92-
</tr>
93-
<tr>
94-
<td>page</td>
95-
<td>Number</td>
96-
<td>1</td>
97-
<td>A number for set a default page.</td>
98-
</tr>
99-
<tr>
100-
<td>lang</td>
101-
<td>String</td>
102-
<td>en</td>
103-
<td>Default language to show (<i>Available: en, es</i>).</td>
104-
</tr>
105-
<tr>
106-
<td>customClass</td>
107-
<td>String</td>
108-
<td></td>
109-
<td>A prop for set a custom class.</td>
110-
</tr>
111-
</tbody>
112-
</table>
106+
<div class="panel">
107+
<div class="panel-body custom-panel">
108+
<table class="table table-hover">
109+
<thead>
110+
<tr>
111+
<th>Prop</th>
112+
<th>Type</th>
113+
<th>Default</th>
114+
<th>Description</th>
115+
</tr>
116+
</thead>
117+
<tbody>
118+
<tr>
119+
<td>total <i>(required)</i></td>
120+
<td>Number</td>
121+
<td>-</td>
122+
<td>A number of total items.</td>
123+
</tr>
124+
<tr>
125+
<td>page</td>
126+
<td>Number</td>
127+
<td>1</td>
128+
<td>A number for set a default page.</td>
129+
</tr>
130+
<tr>
131+
<td>lang</td>
132+
<td>String</td>
133+
<td>en</td>
134+
<td>Default language to show (<i>Available: en, es</i>).</td>
135+
</tr>
136+
<tr>
137+
<td>customClass</td>
138+
<td>String</td>
139+
<td></td>
140+
<td>A prop for set a custom class.</td>
141+
</tr>
142+
</tbody>
143+
</table>
144+
</div>
145+
</div>
113146
<br>
114147
<h5>Events</h5>
115-
<table class="table table-stripe">
116-
<thead>
117-
<tr>
118-
<th>Event</th>
119-
<th>Description</th>
120-
</tr>
121-
</thead>
122-
<tbody>
123-
<tr>
124-
<td>tiny:change-page</td>
125-
<td>Get the current page from pagination <code>payload: {page: 1}</code>.</td>
126-
</tr>
127-
</tbody>
128-
</table>
148+
<div class="panel">
149+
<div class="panel-body custom-panel">
150+
<table class="table table-hover">
151+
<thead>
152+
<tr>
153+
<th>Event</th>
154+
<th>Description</th>
155+
</tr>
156+
</thead>
157+
<tbody>
158+
<tr>
159+
<td>tiny:change-page</td>
160+
<td>Get the current page from pagination <code>payload: {page: 1}</code>.</td>
161+
</tr>
162+
</tbody>
163+
</table>
164+
</div>
165+
</div>
129166
<br>
130167
<br>
131168
<div class="divider text-center" data-content="WHAT'S NEW"></div>
132169
<br>
133170
<div class="timeline">
134-
<div class="timeline-item" id="timeline-example-1">
171+
<div class="timeline-item">
135172
<div class="timeline-left">
136-
<a href="#timeline-example-1" class="timeline-icon tooltip" data-tooltip="March 2016"></a>
173+
<a href="#timeline-example-1" class="timeline-icon tooltip" data-tooltip="February 2017"></a>
137174
</div>
138175
<div class="timeline-content">
139176
<div class="tile">
140177
<div class="tile-content">
141-
<p class="tile-subtitle">February 10, 2017</p>
142-
<p class="tile-title">Initial commit and first release.</p>
178+
<p class="tile-subtitle">February, 2017</p>
179+
<p class="tile-title"><span class="text-primary">[v0.1.0]</span> Initial commit and first release.</p>
180+
<p class="tile-title"><span class="text-primary">[v0.1.1]</span> Updated typo on README.md.</p>
181+
<p class="tile-title"><span class="text-primary">[v0.1.2]</span> Changed default pageSize from <code>15 to 10</code>. Added cursor <code>not-allowed</code> for disabled page-items.</p>
143182
</div>
144183
</div>
145184
</div>
@@ -149,27 +188,47 @@
149188
</section>
150189
<footer class="section-footer">
151190
<div class="grid-footer container grid-lg">
152-
<p><a href="https://dribbble.com/coderdiaz" target="_blank">Dribbble</a> | <a href="https://github.com/coderdiaz/vue-tiny-pagination" target="_blank">GitHub</a> | Version <span class="version">0.1.0</span></p>
191+
<p><a href="https://dribbble.com/coderdiaz" target="_blank">Dribbble</a> | <a href="https://github.com/coderdiaz/vue-tiny-pagination" target="_blank">GitHub</a> | Version <span class="version"></span></p>
153192
<p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/coderdiaz" target="_blank">Javier Diaz</a>. Licensed under the <a href="https://github.com/coderdiaz/vue-tiny-pagination/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
154193
</div>
155194
</footer>
156195
</div>
157196
</template>
158197

159198
<script>
199+
import {getUsers} from './services/api'
160200
import TinyPagination from "./components/TinyPagination";
161201
export default {
162202
name: "app",
163203
data() {
164204
return {
165-
currentTotal: 100,
205+
currentTotal: 0,
166206
currentPage: 1,
167-
message: "A Vue component for create tiny pagination"
207+
message: "A Vue component for create tiny pagination",
208+
users: [],
209+
error: {
210+
status: false,
211+
message: ''
212+
}
168213
};
169214
},
215+
created () {
216+
this.getData(this.currentPage)
217+
},
170218
methods: {
219+
getData (page) {
220+
this.error.status = false
221+
getUsers(page).then((response) => {
222+
this.users = response.data.data
223+
this.currentTotal = response.data.total
224+
}).catch((err) => {
225+
this.error.status = true
226+
this.error.message = err.message
227+
})
228+
},
171229
changePage(pagination) {
172230
this.currentPage = pagination.page
231+
this.getData(this.currentPage)
173232
}
174233
},
175234
components: {

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy