Laravel and vue: Supersimple pagination with query parameters

Screen-Shot-2017-08-06-at-16.20.31

I have been looking around to find a Vue pagination component for Laravel, but I have been unable to find a  simple component which support query parameters and which are not dependant on any css framework.

In this example I´m using the Bulma (bulma.io) CSS frontend framework and Laravel 5.5

At the backend I followed Jeffreys Dedicated Query String Filtering lesson (https://laracasts.com/series/eloquent-techniques/episodes/4)

Fyi: I´m a newbie with both Laravel and Vue, so there might be other and better ways of implementing this component. 

<template>
    <div class="columns">
        <div class="column is-12">
            <form>
                <label class="label">Søk etter kontakt / firma</label>
                <div class="field has-addons">
                    <div class="control is-expanded">
                        <input class="input" type="text" placeholder="Skriv inn søketekst" v-model="searchQuery" @keydown.enter.prevent='getContacts'>
                    </div>
                    <div class="control">
                        <a class="button is-info" @click.prevent="getContacts">
                            Søk
                        </a>
                    </div>
                </div>
                <p class="help">Søkeord: Navn, telefon eller e-post</p>
            </form>

            <div class="columns">
                <div class="column">

                    <ul class="search_results">
                        <li class="single_search_result" v-for="contact in contacts.data">
                            <a :href="'contact/'+contact.id">
                                <span class="contact_name">{{ contact.name }} </span>
                                <em>
                                    {{ contact.primary_number}}
                                    {{ contact.city}}
                                </em>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="column">
                <div class="columns">
                    <nav class="pagination is-centered" v-if="lastpage > 1">
                        <a class="pagination-previous" @click.prevent="paginatePrevious" v-bind:disabled="previousDisabled">Forrige</a>
                        <a class="pagination-next" @click.prevent="paginateNext" v-bind:disabled="nextDisabled">Neste</a>
                    </nav>

                </div>
            </div>

        </div>
    </div>

</template>

<script>
    export default {
        data() {
            return {
                contacts: {},
                errors: [],
                searchQuery: '',
                pagination: {},
                page: '',
                lastpage: ''
            }
        },
        computed: {
          previousDisabled: function () {
              if (this.page === 1) {
                  return true;
              }
          },
          nextDisabled: function () {
              if (this.page === this.lastpage) {
                  return true;
              }
          }
        },
        methods: {
            searchContacts: function ()
            {
                axios.get(`/searchContact`, {
                    params: {
                        keyword: this.searchQuery,
                        page: this.page
                }
            })
                .then(response => {
                    this.contacts = response.data;
                    this.lastpage = response.data.last_page;
                })
                .catch(e => {
                    this.errors.push(e)
                })
                 },

            paginateNext: function() {
                if (this.page < this.lastpage) {
                    this.page++
                }
                this.searchContacts()
            },
            paginatePrevious: function () {
                if (this.page > 1) {
                    this.page--
                }
                this.searchContacts()
            },
            getContacts: function () {
                this.page = 1;
                this.searchContacts()
            }
        }
    }
</script> 
Fant flyvrak fra andre verdenskrig funnet i Nordsj...
Slik får du en vellykket telttur

Relaterte artikler

 

Kommentarer

Ingen kommentarer
Eksisterende bruker? Log inn her
Besøkende
lørdag 16. februar 2019
For å opprette bruker, vennligst fyll inn brukernavn, passord og navn.