laravel-vue-semantic-ui-pagination

1.0.3 • Public • Published

Build Status

Laravel Vue Semantic-UI Pagination ⚡️

  • 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

Requirements

✅ Install 👌

npm install laravel-vue-semantic-ui-pagination
// or
yarn add laravel-vue-semantic-ui-pagination

✅ Usage 🎓

Register the component globally:

Vue.component('pagination', require('laravel-vue-pagination'));

Or use locally

import pagination from 'laravel-vue-semantic-ui-pagination';

✅ Example 🍀

<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;
                });
        }
    }
 
});

✅ 📖 Props

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,
}

✅ 👂 Events

Name Description
change-page Triggered when a user changes page. Passes the new page index as a parameter.

NPM :octocat:

NPM

Package Sidebar

Install

npm i laravel-vue-semantic-ui-pagination

Weekly Downloads

3

Version

1.0.3

License

MIT

Last publish

Collaborators

  • vinayakkulkarni
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