Issue
When I display data from the server in a table, and conditionally, 25 rows should be displayed on the last page of pagination, and 10 rows are left to display, then I get an error that id is undefined.
Is it possible to somehow put restrictions on the display of data that is available and received from the server with my own code.
I use the vue3-table-lite library, I take the data from json-placeholder.
<template>
<table-lite
:is-loading="table.isLoading"
:is-re-search="table.isReSearch"
:columns="table.columns"
:rows="table.rows"
:total="table.totalRecordCount"
:sortable="table.sortable"
:messages="table.messages"
:page-options="table.pageOptions"
@do-search="doSearch"
@is-finished="tableLoadingFinish"
></table-lite>
</template>
<script lang="ts">
import { defineComponent, reactive } from "vue";
import TableLite from "vue3-table-lite/ts";
import axios from "axios";
import { data } from "./data";
const dataAsc = (offset: number, limit: any, response: any) => {
// offset = offset;
let data = [];
for (let i = offset; i < limit; i++) {
data.push({
id: response.data[i].id,
name: response.data[i].name,
username: response.data[i].username,
address: response.data[i].address,
phone: response.data[i].phone,
website: response.data[i].website,
email: response.data[i].email,
company: response.data[i].company,
});
}
console.log(data);
return data;
};
const dataDesc = (offset: number, limit: any, response: any) => {
console.log(offset, limit, response);
let data = [];
for (let i = limit - 1; i >= offset; i--) {
data.push({
id: response.data[i].id,
name: response.data[i].name,
username: response.data[i].username,
address: response.data[i].address,
phone: response.data[i].phone,
website: response.data[i].website,
email: response.data[i].email,
company: response.data[i].company,
});
}
console.log(data);
return data;
};
export default defineComponent({
name: "App",
components: { TableLite },
setup() {
const table = reactive({
isLoading: false,
isReSearch: false,
columns: data,
rows: [],
totalRecordCount: 0,
sortable: {
order: "id",
sort: "asc",
},
messages: {
pagingInfo: "",
// pageSizeChangeLabel: "Число строк:",
// gotoPageLabel: "Перейти на страницу:",
noDataAvailable: "Нет данных",
},
pageOptions: [
{
value: 15,
text: "15/стр",
},
{
value: 30,
text: "30/стр",
},
],
});
/**
* Table search event
*/
const doSearch = (
offset: number,
limit: number,
order: string,
sort: string
) => {
table.isLoading = true;
table.isReSearch = offset == undefined ? true : false;
let url = "https://jsonplaceholder.typicode.com/posts";
axios.get(url).then((response: any) => {
if ((offset >= 15 || limit >= 30) && limit <= response.data.length - 30) {
limit = offset + 30;
}
if (sort === "asc") {
table.rows = dataAsc(offset, limit, response);
} else {
table.rows = dataDesc(offset, limit, response);
}
// refresh table rows
table.totalRecordCount = response.data.length;
table.sortable.order = order;
table.sortable.sort = sort;
// console.log(offset, limit, order, sort);
});
};
/**
* Table search finished event
*/
const tableLoadingFinish = (elements: any) => {
table.isLoading = false;
};
// Get data first
doSearch(0, table.pageOptions[0].value, "id", "asc");
return {
table,
doSearch,
tableLoadingFinish,
};
},
});
</script>
data.ts file:
export const data = [
{
label: "ID",
field: "id",
sortable: true,
isKey: true,
width: "3%",
},
{
label: "Имя",
field: "name",
sortable: true,
},
{
label: "Ник",
field: "username",
sortable: true,
},
{
label: "Адрес",
field: "address",
sortable: true,
},
{
label: "Телефон",
field: "phone",
sortable: true,
},
{
label: "Сайт",
field: "website",
sortable: true,
},
{
label: "Почта",
field: "email",
sortable: true,
},
{
label: "Компания",
field: "company",
sortable: true,
},
];
Solution
In general, it was necessary to create a condition to check that limit exceeds the number of rows of data:
const doSearch = (
offset: number,
limit: number,
order: string,
sort: string
) => {
table.isLoading = true
table.isReSearch = offset == undefined ? true : false
const i = limit
const url = 'https://jsonplaceholder.typicode.com/posts'
axios.get(url).then((response: any) => {
limit = offset + i
if (limit >= response.data.length) {
limit = response.data.length
}
if (sort === 'asc') {
table.rows = dataAsc(offset, limit, response)
} else {
table.rows = dataDesc(offset, limit, response)
}
// refresh table rows
table.totalRecordCount = response.data.length
table.sortable.order = order
table.sortable.sort = sort
})
}
Answered By - Miangel
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.