Ngx-pagination - рендеринг страницы очень медленный
Я пытаюсь создать приложение, используя Nodejs, Angular 6 и SQL. В моей базе данных более 80 000 элементов, и когда я пытаюсь разбить на страницы с помощью ngx-pagination, он работает очень медленно (get из базы данных происходит за 15 секунд, но страница отображается более чем за 1,5 минуты).
Здесь у вас есть фрагмент моего кода:
.html
<table>
<thead>
...
</thead>
<tbody>
<tr *ngFor = "let ded of filteredArray | orderBy : key : reverse | { itemsPerPage: crtPage, currentPage: p, totalItems: itemsLength() }"
<td>{{ ded.name }}</td>
<td>{{ ded.group }}</td>
<td>{{ ded.age }}</td>
<tr>
</tbody>
<div class = "hint-text">
<span>
Showing {{ itemsLength() }} entries.
</span>
</div>
<table>
.тс
ngOnInit() {
this.refreshItemsList()
}
refreshItemsList() {
this.dedService.getNNItems().subscribe((res) => {
this.extractItems(res)
});
}
extractItems(res) {
this.filteredArray = res
}
itemsLength() {
return this.filteredArray.length
}
Что я могу сделать, чтобы визуализировать элементы быстрее? Спасибо.
Я предполагаю, что это означает отображение меньшего количества записей на странице, иначе произойдет сбой. Я делаю 50 на странице. Первая отображаемая страница всегда «ждет» загрузки других страниц. Как я могу отображать только первую страницу, а затем ждать другую одну за другой?
Вы делаете один огромный запрос на загрузку всех записей или делаете запрос на каждую страницу? Я имею в виду, вы выполняете пагинацию только на стороне клиента?
Да, только на стороне клиента. У меня есть фильтры+поиск+сортировка по этой таблице. Если я выполню разбиение на страницы на стороне сервера, я больше не смогу их использовать, верно?
Таблицы с фильтрацией и разбивкой на страницы — непростая вещь для кода, когда вы имеете дело с огромными данными. Вы должны фильтровать и пейджинг на стороне сервера для гораздо лучшей производительности.
Я не думаю, что вы потеряете эти способности. Одновременная выборка 80 тыс. записей - не лучший подход, как сказал @Zak в ответе. Думаю, вам стоит пересмотреть свой подход. Я думаю, что рендеринг на стороне сервера здесь «обязателен». Вы можете отправить свои данные filter + search keyword + sort вместе с запросом и вернуть только соответствующие товары.
Ответы 1
Поэтому, если вы пытаетесь получить 80 тыс. элементов и страницу на стороне клиента, это не очень хороший подход. Он использует много памяти и вычислительной мощности при каждом обновлении.
Взгляните на пейджинг на стороне сервера: https://www.npmjs.com/package/ngx-pagination#сервер-сторона-пейджинг
На стороне Nodejs вы можете разбить свои результаты на страницы примерно так:
var query = "Select * from ?? DESC limit ? OFFSET ?";
//Mention table from where you want to fetch records example-users & send limit and start
var table = ["your table",LimitNum,startNum];
query = mysql.format(query, table);
connection.query(query, function(err, rest) {
if (err){
res.json(err);
}
else{
// Total Count varibale display total Count in Db and data display the records
res.json("Total Count": totalCount , "data":rest)
}
И как я могу выполнить эту разбивку на страницы на стороне сервера? Я читал эту статью раньше, но там говорится только об этом параметре totalItems: res.count, используемом для ngx-pagination.
@Mr.Wizard Да, документ не очень подробный на стороне сервера. Вы должны передать ограничение на страницу и смещение для вашего запроса sql. То же самое и с фильтрами. Это немного работы.
У вас есть идеи, где я могу найти хороший учебник по разбивке на страницы на стороне сервера?
@Mr.Wizard, их много. Вот один из них: medium.com/@salonimalhotra1ind/…
Вы пытаетесь получить 80 000 записей за один раз? Почему? В чем тогда смысл "разбивки на страницы"?