Таблица UI
<div class="card mt-5 mr-5 ml-5 mb-5" id="bookInfo">
<table
id="table_id"
class="display table-design cell-border"
data-page-length="10"
>
<thead>
<tr>
<th>Author</th>
<th>Title</th>
<th>Cover Page</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
Таблица данных Заполняющий код
$(document).ready(function() {
$.ajax({
url: "/api/v1/bookdata?page=1&limit=10000",
dataType: "json",
type: "GET",
contentType: "application/json; charset=utf-8",
success: function(data) {
let tr;
const books = data.results;
for (let i = 0; i < books.length; i++) {
tr += "<tr>";
tr += "<td>" + books[i].authors + "</td>";
tr += "<td>" + books[i].title + "</td>";
tr += "<td><img src='" + books[i].image_url + "' /></td>";
tr += "</tr>";
}
$("#table_id").append(tr);
tblFormation();
},
error: function(xhr) {}
});
function tblFormation() {
$("#table_id").DataTable({
searching: true,
processing: true,
scrollY: 700,
deferRender: true,
scroller: true
});
}
});
Node JS GET API
app.get("/api/v1/bookdata", (req, res) => {
const mydara = db.collection(BOOKDATA);
const page = parseInt(req.query.page);
const limit = parseInt(req.query.limit);
const startIndex = (page - 1) * limit;
const endIndex = page * limit;
const results = {};
if (endIndex < mydara.length) {
results.next = {
page: page + 1,
limit: limit
};
}
if (startIndex > 0) {
results.previous = {
page: page - 1,
limit: limit
};
}
mydara.find({}).toArray(function(err, result) {
var obj = JSON.parse(JSON.stringify(result));
if (err) {
throw err;
} else {
results.results = obj.slice(startIndex, endIndex);
res.send(results);
}
});
});
Я могу получить данные, но время рендеринга намного больше 1 минута , что плохо для UX . Я не могу сократить время загрузки в этом. Если возможно, кто-то может предложить идею сократить время загрузки этих данных. Итоговые данные 10000 , которые поступают из mongodb collection . Если требуется еще фрагмент, пожалуйста, прокомментируйте здесь .