Jan 14, 2023
0
Level 1
I have issues updating table data when i update the pagination.
<template>
<div class="bg-white px-1 py-2 rounded">
<div class="container mx-auto py-2 px-4">
<h1 class="text-2xl py-2 border-b mb-3">All Offers</h1>
<div class="mb-4 flex justify-between items-center">
<div class="flex-1 pr-4">
<div class="relative md:w-1/3">
<input type="search" class="w-full pl-10 pr-4 py-2 rounded focus:outline-none focus:shadow-outline text-gray-600 font-medium" placeholder="Search...">
<div class="absolute top-0 left-0 inline-flex items-center p-2">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-gray-400" viewBox="0 0 24 24"
stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<rect x="0" y="0" width="24" height="24" stroke="none"></rect>
<circle cx="10" cy="10" r="7" />
<line x1="21" y1="21" x2="15" y2="15" />
</svg>
</div>
</div>
</div>
<div>
<div class="rounded flex">
<div class="relative">
<button @click.prevent="open = !open"
class="rounded-lg inline-flex items-center bg-white hover:text-blue-500 focus:outline-none focus:shadow-outline text-gray-500 font-semibold py-2 px-2 md:px-4">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 md:hidden" viewBox="0 0 24 24"
stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<rect x="0" y="0" width="24" height="24" stroke="none"></rect>
<path
d="M5.5 5h13a1 1 0 0 1 0.5 1.5L14 12L14 19L10 16L10 12L5 6.5a1 1 0 0 1 0.5 -1.5" />
</svg>
<span class="hidden md:block">Display</span>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 ml-1" width="24" height="24"
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<rect x="0" y="0" width="24" height="24" stroke="none"></rect>
<polyline points="6 9 12 15 18 9" />
</svg>
</button>
<div x-show="open" @click.away="open = false"
class="z-40 absolute top-0 right-0 w-40 bg-white rounded-lg shadow-lg mt-12 -mr-1 block py-1 overflow-hidden">
</div>
</div>
</div>
</div>
</div>
<div class="overflow-x-auto bg-white rounded overflow-y-auto relative" style="height: 405px;">
<table class="border-collapse table-auto w-full whitespace-no-wrap bg-white table-striped relative">
<thead class="w-full text-md text-gray-700 uppercase bg-gray-200 dark:bg-gray-700 dark:text-gray-400 border-b">
<tr class="text-left">
<th class="py-2 px-3">
Name
</th>
<th class="py-2 px-3">
Devices
</th>
<th class="py-2 px-3">
Category
</th>
<th class="py-2 px-3">
Payout
</th>
<th class="py-2 px-3">
Country
</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-200" v-for="offer in computedTableData" :key="offer.id">
<td class="flex items-center px-6 py-3 font-medium text-gray-900 whitespace-nowrap border-dashed border-t border-gray-200 px-3">
<img :src="offer.image" class="w-10 h-10 rounded-full">
<div class="pl-3">
<div class="text-base font-semibold">{{ offer.name }}</div>
<div class="font-normal text-gray-500">{{ offer.description.slice(0,50) }}</div>
</div>
</td>
<td class="border-dashed border-t border-gray-200 px-3">
<span class="text-gray-700 px-1">
<p class ="flex p-1 space-x-1" v-if="offer.devices == '*'">
<i class="fas fa-computer"></i>
<i class="fa-solid fa-laptop"></i>
<i class="fa-brands fa-android"></i>
<i class="fa-brands fa-apple"></i>
</p>
<p v-else-if="offer.devices == 'windows'">
<i class="fas fa-computer"></i>
</p>
<p v-else-if="offer.devices == 'mac'">
<i class="fa-solid fa-laptop"></i>
</p>
<p class="py-1" v-else-if="offer.devices == 'android'">
<i class="fa-brands fa-android"></i>
</p>
<p class="px-1 py-1" v-else-if="offer.devices == 'iphone,ipad'">
<i class="fa-brands fa-apple"></i>
</p>
<p class="p-1 space-x-1" v-else-if="offer.devices == 'iphone,ipad,android'">
<i class="fa-brands fa-android"></i>
<i class="fa-brands fa-apple"></i>
</p>
<p v-else-if="offer.devices == 'windows,macos,android,iphone,ipad'">
<i class="fas fa-computer"></i>
<i class="fa-solid fa-laptop"></i>
<i class="fa-brands fa-android"></i>
<i class="fa-brands fa-apple"></i>
</p>
<p class="flex p-1 space-x-1" v-else-if="offer.devices == 'windows' , 'macos' ">
<i class="fas fa-computer"></i>
<i class="fa-solid fa-laptop"></i>
</p>
</span>
</td>
<td class="border-dashed border-t border-gray-200 px-3">
</td>
<td class="border-dashed border-t border-gray-200 px-3">
{{ offer.revenue }}
</td>
<td class="flex space-x-1 border-dashed border-t border-gray-200 px-3">
<p v-if="offer.countries == '*'">All Countries</p>
<p v-else v-for="country in offer.countries.slice(0, 10)" :key="country">
<img v-bind:src="`http://127.0.0.1:8000/vendor/blade-flags/country-` + country +'.svg'" class="w-4 h-4"/>
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<Pagination v-if="tableData" :totalRecords="tableData.length" :perPageOptions="perPageOptions" v-model="pagination"/>
</div>
</template>
<script>
import Pagination from '../components/Pagination'
const perPageOptions = [20, 50, 100]
export default {
components: {
Pagination
},
data: function () {
return {
perPageOptions,
tableData: undefined,
pagination: { page: 1, perPage: perPageOptions[0] },
}
},
computed: {
computedTableData () {
if (!this.tableData) return []
else {
const firstIndex = (this.pagination.page - 1) * this.pagination.perPage
const lastIndex = this.pagination.page * this.pagination.perPage
return this.tableData.slice(firstIndex, lastIndex)
}
}
},
mounted () {
this.$axios.get('/api/alloffers')
.then(({data}) => {
this.tableData = data.offers
})
}
}
</script>
Pagination Component
<template>
<section>
<p class="flex items-center justify-center">
<svg @click="changePage(0)" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
</svg>
<svg @click="changePage(-1)" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
Page {{ page }} of {{pages}}
<svg @click="changePage(1)" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
<svg @click="changePage(pages)" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
</svg>
</p>
</section>
</template>
<script>
export default {
props: ['totalRecords', 'perPageOptions'],
data: function () {
return {
page: 1,
perPage: this.perPageOptions[0]
}
},
computed: {
pages () {
const remainder = this.totalRecords % this.perPage
if (remainder > 0) {
return Math.floor(this.totalRecords / this.perPage) + 1
} else {
return this.totalRecords / this.perPage
}
}
},
methods: {
setPerPage(amount) {
this.perPage = amount
this.$emit('input', {page: this.page, perPage: amount})
},
changePage (val) {
switch (val) {
case 0: this.page = 1; break;
case -1: this.page = this.page > 1 ? this.page - 1 : this.page; break;
case 1: this.page = this.page < this.pages ? this.page + 1 : this.page; break;
case this.pages: this.page = this.pages; break;
}
this.$emit('input', { page: this.page, perPage: this.perPage })
}
}
}
</script>
Please or to participate in this conversation.