Server-side paginate and sort
API data problem
unknown
javascript
4 years ago
17 kB
11
Indexable
<template>
<div>
<v-data-table
:headers="headers"
:items="products"
:options.sync="options"
:server-items-length="totalProducts"
:loading="loading"
class="elevation-1"
></v-data-table>
</div>
</template>
<script>
export default {
data() {
return {
totalProducts: 0,
products: [],
loading: true,
options: {},
headers: [
{text: 'Id', align: 'left', value: 'id'},
{text: 'image', sortable: false, value: 'image'},
{text: 'Name', align: 'left', value: 'title'},
{text: 'Description', value: 'description'},
{text: 'Price', value: 'price'},
{text: 'Action', sortable: false, align: 'right', value: 'action'}
],
}
},
watch: {
options: {
handler() {
this.getDataFromApi()
},
deep: true,
},
},
mounted() {
this.getDataFromApi();
},
methods: {
getDataFromApi() {
this.loading = true
const {sortBy, sortDesc, page, itemsPerPage} = this.options
this.axios.get(`products?page=${page}`).then(response => {
// console.log(response.data.data)
// let items = this.myApiData()
let items = response.data.data
const total = items.length
if (sortBy.length === 1 && sortDesc.length === 1) {
items = items.sort((a, b) => {
const sortA = a[sortBy[0]]
const sortB = b[sortBy[0]]
if (sortDesc[0]) {
if (sortA < sortB) return 1
if (sortA > sortB) return -1
return 0
} else {
if (sortA < sortB) return -1
if (sortA > sortB) return 1
return 0
}
})
}
if (itemsPerPage > 0) {
items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
}
this.products = items
this.totalProducts = total
this.loading = false
})
},
myApiData() {
return [
{
"id": 1,
"title": "Daniella Bruen33",
"description": "Rerum dicta qui iusto. Ea sunt similique aliquam quis tempore cumque. Id illo et quia.",
"image": "https://via.placeholder.com/640x480.png/002233?text=et",
"price": "95.00",
"created_at": "2021-09-02T18:52:57.000000Z",
"updated_at": "2021-09-24T17:09:34.000000Z"
},
{
"id": 2,
"title": "Mr. Thomas Schaden",
"description": "Rem est quisquam necessitatibus tenetur soluta tenetur maxime. Officiis assumenda perspiciatis provident quibusdam voluptatem. Quia ab reprehenderit sunt est.",
"image": "https://via.placeholder.com/640x480.png/000011?text=assumenda",
"price": "20.00",
"created_at": "2021-09-02T18:52:57.000000Z",
"updated_at": "2021-09-02T18:52:57.000000Z"
},
{
"id": 3,
"title": "Mrs. Kaylin Weber II",
"description": "Dolorum eum perspiciatis id cupiditate voluptatibus. Quisquam quia nemo et corrupti maxime quia voluptatem. Expedita quia ut iure in.",
"image": "https://via.placeholder.com/640x480.png/0033cc?text=nihil",
"price": "70.00",
"created_at": "2021-09-02T18:52:57.000000Z",
"updated_at": "2021-09-02T18:52:57.000000Z"
},
{
"id": 4,
"title": "Teagan Gerlach",
"description": "Mollitia beatae soluta sint quae delectus. Autem hic fuga amet consequatur. Praesentium nostrum assumenda sed necessitatibus enim.",
"image": "https://via.placeholder.com/640x480.png/00ff77?text=quaerat",
"price": "57.00",
"created_at": "2021-09-02T18:52:57.000000Z",
"updated_at": "2021-09-02T18:52:57.000000Z"
},
{
"id": 5,
"title": "Otto Goodwin",
"description": "Enim totam atque blanditiis ipsam. Excepturi nam quo reiciendis quod sint.",
"image": "https://via.placeholder.com/640x480.png/00cc33?text=nostrum",
"price": "19.00",
"created_at": "2021-09-02T18:52:57.000000Z",
"updated_at": "2021-09-02T18:52:57.000000Z"
},
{
"id": 6,
"title": "Aletha Hintz",
"description": "Ea eos dolorem perspiciatis et aut adipisci. Maiores harum excepturi et quia vitae beatae vel. Labore quia neque earum dignissimos.",
"image": "https://via.placeholder.com/640x480.png/0011dd?text=repudiandae",
"price": "82.00",
"created_at": "2021-09-02T18:52:57.000000Z",
"updated_at": "2021-09-02T18:52:57.000000Z"
},
{
"id": 7,
"title": "Prof. Eugenia Botsford II3",
"description": "Facilis aut et porro ut delectus minima dolores. Quos suscipit rerum necessitatibus quam fugit delectus tempore. Dolorum iure officiis rerum aut qui eos molestiae.",
"image": "https://via.placeholder.com/640x480.png/002299?text=natus",
"price": "16.00",
"created_at": "2021-09-02T18:52:57.000000Z",
"updated_at": "2021-09-24T17:09:11.000000Z"
},
{
"id": 8,
"title": "Howard Schaden",
"description": "Ea culpa veritatis totam rerum aut sequi sed repellat. Aperiam ratione eum non dolores est. Sit optio veritatis excepturi eum qui. Est eius et ut est.",
"image": "https://via.placeholder.com/640x480.png/000077?text=eum",
"price": "54.00",
"created_at": "2021-09-02T18:52:57.000000Z",
"updated_at": "2021-09-02T18:52:57.000000Z"
},
{
"id": 9,
"title": "Jodie Jakubowski III",
"description": "Voluptas voluptas modi est dolor. Consequatur nulla sunt et fugit est. Ea nisi et est molestiae laborum. Qui optio molestiae est et quo facere incidunt. Fuga explicabo rerum dolor aut sint dolorem.",
"image": "https://via.placeholder.com/640x480.png/005533?text=quo",
"price": "27.00",
"created_at": "2021-09-02T18:52:57.000000Z",
"updated_at": "2021-09-02T18:52:57.000000Z"
},
{
"id": 10,
"title": "Favian Bailey",
"description": "Soluta rem cumque voluptas corporis sunt qui praesentium. Est maiores ipsam qui porro quas. Odio at fugiat quam sequi. Error provident laudantium dolorem libero aspernatur non.",
"image": "https://via.placeholder.com/640x480.png/0066ff?text=sed",
"price": "86.00",
"created_at": "2021-09-02T18:52:57.000000Z",
"updated_at": "2021-09-02T18:52:57.000000Z"
},
{
"id": 11,
"title": "Declan West V",
"description": "Error nam aut architecto aut dolores distinctio. Eaque et quaerat quos beatae eligendi quo cumque. Nostrum exercitationem similique omnis voluptatem alias. Quo ut fugiat perferendis ea saepe.",
"image": "https://via.placeholder.com/640x480.png/00eebb?text=deserunt",
"price": "94.00",
"created_at": "2021-09-02T18:52:57.000000Z",
"updated_at": "2021-09-02T18:52:57.000000Z"
},
{
"id": 12,
"title": "Ms. Aliyah Romaguera MD",
"description": "Reprehenderit rerum et iste nostrum vero beatae. Enim blanditiis quia molestias repellat sit nisi.",
"image": "https://via.placeholder.com/640x480.png/0066cc?text=velit",
"price": "41.00",
"created_at": "2021-09-02T18:52:57.000000Z",
"updated_at": "2021-09-02T18:52:57.000000Z"
},
{
"id": 13,
"title": "Estelle Waters IV",
"description": "Consequatur occaecati fuga provident eveniet assumenda magni veniam. Soluta aperiam omnis molestiae quaerat iure animi. Explicabo ratione assumenda iste impedit nobis quos ipsa.",
"image": "https://via.placeholder.com/640x480.png/000088?text=maiores",
"price": "13.00",
"created_at": "2021-09-02T18:52:57.000000Z",
"updated_at": "2021-09-02T18:52:57.000000Z"
},
{
"id": 14,
"title": "Miss Meredith Marvin DVM",
"description": "Ipsam quia et ut consequatur. Quo qui nostrum vitae incidunt. Magni id porro rerum magni.",
"image": "https://via.placeholder.com/640x480.png/008811?text=quisquam",
"price": "16.00",
"created_at": "2021-09-02T18:52:57.000000Z",
"updated_at": "2021-09-02T18:52:57.000000Z"
},
{
"id": 15,
"title": "Barry Johnston",
"description": "Pariatur recusandae omnis illum quasi eaque eveniet. Ut ut blanditiis qui sit unde et quidem cumque. Nostrum expedita et quasi reiciendis sunt exercitationem.",
"image": "https://via.placeholder.com/640x480.png/007711?text=officiis",
"price": "86.00",
"created_at": "2021-09-02T18:52:57.000000Z",
"updated_at": "2021-09-02T18:52:57.000000Z"
},
{
"id": 16,
"title": "Stephania McKenzie MD",
"description": "Expedita quidem tenetur enim qui. Voluptas dicta neque reiciendis adipisci maiores. Perspiciatis veritatis aliquid nobis distinctio facere error ut. Commodi sequi adipisci non et.",
"image": "https://via.placeholder.com/640x480.png/00dd66?text=nesciunt",
"price": "46.00",
"created_at": "2021-09-02T18:52:57.000000Z",
"updated_at": "2021-09-02T18:52:57.000000Z"
},
{
"id": 17,
"title": "Dr. Roscoe Nienow",
"description": "Qui voluptatem dolor non blanditiis fugit voluptas possimus. Voluptatem et sit modi numquam at perspiciatis. Ut totam nihil cupiditate quidem id molestiae incidunt.",
"image": "https://via.placeholder.com/640x480.png/003377?text=qui",
"price": "84.00",
"created_at": "2021-09-02T18:52:57.000000Z",
"updated_at": "2021-09-02T18:52:57.000000Z"
},
{
"id": 18,
"title": "Hilma Smith",
"description": "Quo illum voluptas maxime sint. Optio sit quaerat dolores enim nemo. Officia qui dicta excepturi. Voluptates libero eos vel facilis totam nesciunt.",
"image": "https://via.placeholder.com/640x480.png/0044dd?text=laudantium",
"price": "73.00",
"created_at": "2021-09-02T18:52:57.000000Z",
"updated_at": "2021-09-02T18:52:57.000000Z"
},
{
"id": 19,
"title": "David Shields MD",
"description": "Voluptatum velit quo sit eum. Saepe autem et amet quia sit laboriosam. Sit aut nobis non est. In autem nemo autem doloribus velit beatae quia.",
"image": "https://via.placeholder.com/640x480.png/004499?text=consequatur",
"price": "35.00",
"created_at": "2021-09-02T18:52:57.000000Z",
"updated_at": "2021-09-02T18:52:57.000000Z"
},
{
"id": 20,
"title": "Michel Lueilwitz",
"description": "Eum quo ea et facere quo sunt soluta beatae. Nihil magnam voluptatem eveniet nemo. Ipsa fugit quia quae consequatur amet illum rerum quia.",
"image": "https://via.placeholder.com/640x480.png/006644?text=consectetur",
"price": "49.00",
"created_at": "2021-09-02T18:52:57.000000Z",
"updated_at": "2021-09-02T18:52:57.000000Z"
},
{
"id": 21,
"title": "Prof. Jayden O'Conner Sr.",
"description": "Blanditiis consequatur aliquam ut ab fugit. Quam optio qui impedit rerum tenetur. Unde ut necessitatibus consequuntur.",
"image": "https://via.placeholder.com/640x480.png/002288?text=omnis",
"price": "69.00",
"created_at": "2021-09-02T18:52:57.000000Z",
"updated_at": "2021-09-02T18:52:57.000000Z"
},
{
"id": 22,
"title": "Dusty Greenholt",
"description": "Et quis esse et delectus sed. Laudantium qui nobis laborum id ut. Eveniet facilis rerum facere et quam.",
"image": "https://via.placeholder.com/640x480.png/00ccee?text=nihil",
"price": "76.00",
"created_at": "2021-09-02T18:52:57.000000Z",
"updated_at": "2021-09-02T18:52:57.000000Z"
},
{
"id": 23,
"title": "Roscoe Ankunding II",
"description": "Est aut hic culpa ut. Temporibus placeat ullam at rerum enim enim voluptates. Est ad odit nihil dolores.",
"image": "https://via.placeholder.com/640x480.png/008822?text=blanditiis",
"price": "33.00",
"created_at": "2021-09-02T18:52:57.000000Z",
"updated_at": "2021-09-02T18:52:57.000000Z"
},
{
"id": 24,
"title": "Jamal Marquardt V",
"description": "Culpa rem esse numquam. Eveniet et at quia. Consectetur non ea nemo minus est.",
"image": "https://via.placeholder.com/640x480.png/0088bb?text=quas",
"price": "99.00",
"created_at": "2021-09-02T18:52:57.000000Z",
"updated_at": "2021-09-02T18:52:57.000000Z"
},
{
"id": 25,
"title": "Kevon Labadie",
"description": "Omnis dolor quia doloremque non id. Nesciunt aspernatur id eveniet aut aut. Consequatur velit eius reiciendis ipsa labore. Nisi dolore at quia laudantium.",
"image": "https://via.placeholder.com/640x480.png/003344?text=et",
"price": "34.00",
"created_at": "2021-09-02T18:52:57.000000Z",
"updated_at": "2021-09-02T18:52:57.000000Z"
},
{
"id": 26,
"title": "Mr. Clifton Flatley",
"description": "Ea sapiente est inventore qui qui dicta dicta ipsam. Neque ut aut deserunt. Ea dicta eaque et veritatis. Nisi accusamus praesentium modi ducimus vitae.",
"image": "https://via.placeholder.com/640x480.png/00bbee?text=ad",
"price": "88.00",
"created_at": "2021-09-02T18:52:57.000000Z",
"updated_at": "2021-09-02T18:52:57.000000Z"
},
{
"id": 27,
"title": "Chesley Nader",
"description": "Perferendis consequuntur voluptatum quasi consectetur omnis laudantium a. Quia sed eos aut dignissimos distinctio vero.",
"image": "https://via.placeholder.com/640x480.png/003311?text=tenetur",
"price": "67.00",
"created_at": "2021-09-02T18:52:57.000000Z",
"updated_at": "2021-09-02T18:52:57.000000Z"
},
{
"id": 28,
"title": "Dr. Antonio Rippin",
"description": "Consectetur consequatur eveniet deserunt unde dolores. Laudantium fugiat harum assumenda voluptatibus est est. Qui eveniet dolor sed.",
"image": "https://via.placeholder.com/640x480.png/00cc33?text=odio",
"price": "56.00",
"created_at": "2021-09-02T18:52:57.000000Z",
"updated_at": "2021-09-02T18:52:57.000000Z"
},
{
"id": 29,
"title": "Amira Koss",
"description": "Quas in reiciendis aut dolor voluptas. Aperiam at suscipit sit quidem nihil cumque. Praesentium sunt adipisci dolores et corporis sint qui.",
"image": "https://via.placeholder.com/640x480.png/00cc44?text=et",
"price": "85.00",
"created_at": "2021-09-02T18:52:57.000000Z",
"updated_at": "2021-09-02T18:52:57.000000Z"
},
{
"id": 30,
"title": "Salvatore Howell",
"description": "Omnis laudantium magnam rem nisi. Laboriosam quis esse nostrum fuga in. Vitae culpa possimus vel repudiandae. Saepe quibusdam in sed qui nihil.",
"image": "https://via.placeholder.com/640x480.png/006699?text=exercitationem",
"price": "50.00",
"created_at": "2021-09-02T18:52:57.000000Z",
"updated_at": "2021-09-02T18:52:57.000000Z"
},
{
"id": 31,
"title": "Ptak3",
"description": "Super Ptaszek",
"image": "http://localhost:8888/images/A8PAiZ3QPT.jpg",
"price": "13.00",
"created_at": "2021-09-02T18:57:50.000000Z",
"updated_at": "2021-09-02T18:58:01.000000Z"
},
{
"id": 32,
"title": "Dental",
"description": "medic",
"image": "http://localhost:8888/images/A8PAiZ3QPT.jpg",
"price": "23.00",
"created_at": "2021-10-04T13:26:24.000000Z",
"updated_at": "2021-10-04T13:26:24.000000Z"
}
]
},
},
}
</script>
Editor is loading...