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

+119-60
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)