VueJS pagination component to paginate anything in Laravel, checkout the tutorial on http://wp.me/p8cmxL-b7 by www.qcode.in
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div :class="{'loading': loading}" class="pager-data-wrapper"> | |
<!-- Pagination Slot --> | |
<slot :result="getResult()"> | |
<div class="text-center alert-info pb-3"> | |
<span v-if="!loading"> | |
{{ result.length }} items found. render it using v-for="item in result" | |
</span> | |
<span v-if="loading"> | |
Loading... | |
</span> | |
</div> | |
</slot> | |
<!-- Pagination links --> | |
<div class="pager-link text-center"> | |
<div v-if="pagerType == 'paged'"> | |
<a | |
v-show="result.length" | |
:disabled="!prevPageUrl || loading" | |
:href="prevPageUrl" | |
@click.prevent="prevPage" | |
:class="{loading: loading}" | |
class="btn btn-primary">Prev</a> | |
<a | |
:disabled="!nextPageUrl || loading" | |
:href="nextPageUrl" | |
@click.prevent="nextPage" | |
:class="{loading: loading}" | |
class="btn btn-primary">Next</a> | |
</div> | |
<button | |
v-if="pagerType == 'single'" | |
@click.prevent="nextPage" | |
class="btn btn-block btn-primary" | |
:class="{loading: loading}" | |
:disabled="loading || !nextPageUrl"> | |
{{ loading ? 'Loading...' : moreBtnText }} | |
</button> | |
</div> | |
</div> | |
</template> | |
<script> | |
export default { | |
props: { | |
url: { | |
required: true | |
}, | |
moreBtnText: { | |
type: String, | |
default: 'Load More...' | |
}, | |
chunked: { | |
type: Number, | |
default: 0 | |
}, | |
prepend: { | |
default: null | |
}, | |
apepend: { | |
default: null | |
}, | |
pagerType: { | |
default: 'single' | |
} | |
}, | |
data() { | |
return { | |
result: [], | |
loading: true, | |
nextPageUrl: null, | |
prevPageUrl: null, | |
prependData: null, | |
appendData: null | |
} | |
}, | |
created() { | |
// load the data initially | |
this.fetchData(); | |
}, | |
methods: { | |
fetchData(url) { | |
let vm = this; | |
let endpoint = url ? url : this.url; | |
// show loader | |
vm.loading = true; | |
// fetch the data from passed url property | |
axios.get(endpoint).then((res) => { | |
// hide the loader | |
vm.loading = false; | |
// Assign returend data | |
if( url && vm.pagerType == 'single' ) { | |
// push next page into result | |
_.forEach(res.data.data, (item) => vm.result.push(item)) | |
} else { | |
// add first page | |
vm.result = res.data.data; | |
} | |
// assigne next and prev page url | |
vm.nextPageUrl = res.data.next_page_url; | |
vm.prevPageUrl = res.data.prev_page_url; | |
}).catch((err) => { | |
vm.loading = false; | |
}) | |
}, | |
getResult() { | |
return (this.chunked > 0) ? _.chunk(this.result, this.chunked) : this.result; | |
}, | |
prevPage() { | |
this.fetchData(this.prevPageUrl) | |
}, | |
nextPage() { | |
this.fetchData(this.nextPageUrl) | |
} | |
}, | |
watch: { | |
prepend(newVal) { | |
if( newVal ) { | |
this.prependData = newVal; | |
this.result.unshift(newVal); | |
} | |
this.prependData = null | |
}, | |
append(newVal) { | |
if( newVal ) { | |
this.appendData = newVal; | |
this.result.push(newVal); | |
} | |
this.appendData = null | |
} | |
} | |
} | |
</script> | |
<style> | |
@-webkit-keyframes spinAround { | |
from { | |
-webkit-transform: rotate(0deg); | |
transform: rotate(0deg); | |
} | |
to { | |
-webkit-transform: rotate(359deg); | |
transform: rotate(359deg); | |
} | |
} | |
@keyframes spinAround { | |
from { | |
-webkit-transform: rotate(0deg); | |
transform: rotate(0deg); | |
} | |
to { | |
-webkit-transform: rotate(359deg); | |
transform: rotate(359deg); | |
} | |
} | |
.btn.loading { | |
color: transparent !important; | |
pointer-events: none; | |
position: relative; | |
} | |
.btn.loading:after { | |
-webkit-animation: spinAround 500ms infinite linear; | |
animation: spinAround 500ms infinite linear; | |
border: 2px solid #dbdbdb; | |
border-radius: 290486px; | |
border-right-color: transparent; | |
border-top-color: transparent; | |
content: ""; | |
display: block; | |
height: 1em; | |
position: relative; | |
width: 1em; | |
position: absolute; | |
left: calc(50% - (1em / 2)); | |
top: calc(50% - (1em / 2)); | |
position: absolute !important; | |
border-color: transparent transparent #fff #fff !important; | |
} | |
.pb-3 { | |
margin-bottom: 3rem | |
} | |
.alert-info { | |
padding: 1rem | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment