https://github.com/vinayakkulkarni/laravel-vue-semantic-ui-pagination
A VueJS 2.x pagination used with Laravel & Semantic-UI :sunny:
https://github.com/vinayakkulkarni/laravel-vue-semantic-ui-pagination
laravel laravel5 pagination paginator semantic-ui semantic-ui-vue vue vue-pagination vuejs2
Last synced: 2 days ago
JSON representation
A VueJS 2.x pagination used with Laravel & Semantic-UI :sunny:
- Host: GitHub
- URL: https://github.com/vinayakkulkarni/laravel-vue-semantic-ui-pagination
- Owner: vinayakkulkarni
- License: mit
- Archived: true
- Created: 2017-08-28T12:27:31.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-12T10:51:41.000Z (over 2 years ago)
- Last Synced: 2024-04-29T23:25:26.255Z (over 1 year ago)
- Topics: laravel, laravel5, pagination, paginator, semantic-ui, semantic-ui-vue, vue, vue-pagination, vuejs2
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/laravel-vue-semantic-ui-pagination
- Size: 405 KB
- Stars: 8
- Watchers: 3
- Forks: 3
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.org/vinayakkulkarni/laravel-vue-semantic-ui-pagination)
# Laravel Vue Semantic-UI Pagination :zap:
+ A Vue.js pagination component for Laravel paginators that works with Semantic-UI.
+ This is [on GitHub](https://github.com/vinayakkulkarni/laravel-vue-semantic-ui-pagination) so let me know if I've b0rked it somewhere, give me a star :star: if you like it :beers:
+ You can checkout the [Demo](https://goo.gl/xtZGF9)
## Requirements
* [Vue.js](https://vuejs.org/) 2.x
* [Laravel](https://laravel.com/docs/) 5.x
* [Semantic-UI](https://semantic-ui.com/) 2.x
## :white_check_mark: Install :ok_hand:
```bash
npm install laravel-vue-semantic-ui-pagination
// or
yarn add laravel-vue-semantic-ui-pagination
```
## :white_check_mark: Usage :mortar_board:
Register the component globally:
```javascript
Vue.component('pagination', require('laravel-vue-semantic-ui-pagination'));
```
Or use locally
```javascript
import pagination from 'laravel-vue-semantic-ui-pagination';
```
## :white_check_mark: Example :four_leaf_clover:
```html
```
```javascript
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;
});
}
}
});
```
### :white_check_mark: :book: Props
| Name | Type | Description |
| --- | --- | --- |
| `data` | Object | An object containing the structure of a [Laravel paginator](https://laravel.com/docs/5.4/pagination) 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](https://semantic-ui.com/elements/icon.html) for specifying which icons you want. |
| `size` | String | (optional) Default is `small`; Refer [Semantic-UI Menu Pagination](https://semantic-ui.com/collections/menu.html#pagination) for specifying the size of paginator. |
```javascript
{
current_page: 1,
data: [],
from: 1,
last_page: 1,
next_page_url: null,
per_page: 10,
prev_page_url: null,
to: 1,
total: 0,
}
```
### :white_check_mark: :ear: Events
| Name | Description |
| --- | --- |
| `change-page` | Triggered when a user changes page. Passes the new `page` index as a parameter. |
## NPM :octocat:
[](https://nodei.co/npm/laravel-vue-semantic-ui-pagination/)