-
A Vue.js pagination component for Laravel paginators that works with Semantic-UI.
-
This is on GitHub so let me know if I've b0rked it somewhere, give me a star ⭐ if you like it 🍻
-
You can checkout the Demo
- Vue.js 2.x
- Laravel 5.x
- Semantic-UI 2.x
npm install laravel-vue-semantic-ui-pagination
// or
yarn add laravel-vue-semantic-ui-paginationRegister the component globally:
Vue.component('pagination', require('laravel-vue-semantic-ui-pagination'));Or use locally
import pagination from 'laravel-vue-semantic-ui-pagination';<ul>
<li v-for="post in laravelData.data" v-text="post.title"></li>
</ul>
<pagination :data="laravelData" v-bind:showDisabled="true" icon="chevron" v-on:change-page="getResults"></pagination>Vue.component('example-component', {
data() {
return {
// Our data object that holds the Laravel paginator data
laravelData: {},
}
},
created() {
// Fetch initial results
this.getResults();
},
methods: {
// Our method to GET results from a Laravel endpoint
getResults(page) {
if (typeof page === 'undefined') {
page = 1;
}
// Using vue-resource as an example
this.$http.get('example/results?page=' + page)
.then(response => {
return response.json();
}).then(data => {
this.laravelData = data;
});
}
}
});| Name | Type | Description |
|---|---|---|
data |
Object | An object containing the structure of a Laravel paginator response. See below for default value. |
limit |
Number | (optional) Limit of pages to be rendered. Default 0 (unlimited links) -1 will hide numeric pages and leave only arrow navigation. 3 will show 3 previous and 3 next numeric pages from current page. |
showDisabled |
Boolean | (optional) If set to true, will display left and right icons always. |
icon |
String | (optional) Default is angle double; Refer Semantic-UI Icons for specifying which icons you want. |
size |
String | (optional) Default is small; Refer Semantic-UI Menu Pagination for specifying the size of paginator. |
{
current_page: 1,
data: [],
from: 1,
last_page: 1,
next_page_url: null,
per_page: 10,
prev_page_url: null,
to: 1,
total: 0,
}| Name | Description |
|---|---|
change-page |
Triggered when a user changes page. Passes the new page index as a parameter. |
