Load only a few values at a time in a datatable from json file (the first values) for speed
Load only a few values at a time in a datatable from json file (the first values) for speed
kodikai
Posts: 5Questions: 2Answers: 0
I'm loading a datatable using json data saved in an online url. The problem is, when the data gets large (in this case, 10,000+ rows), the datatable takes way too long to load (30+ seconds).
I'm wanting to make it so that it will load only the values needed for the page. At the moment, it's paginated so that about a dozen values show on the page, but I think it's slow because it's loading the entire dataset first.
Is there a way to make it so that only those dozen values load first - rather than wait for the whole thing to load?
It needs to still be responsive to several click/search events, so that when the user searches or clicks several filters, the datatable updates - but I would again prefer that it only shows the first page of results.
<body>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Datatables -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
</head>
<body>
<form class="form">
<div>
<input type="text" id="searchInput" class="form-control" placeholder=" Search">
</div>
</form>
<div class="main">
<table class="table mydatatable" id="mydatatable">
<thead>
<tr>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody id="myTable">
</tbody>
</table>
</div>
</body>
</body>
<script>
const url = 'https://raw.githubusercontent.com/________________.json';
async function populate() {
const response = await fetch(url);
const evidenceData = await response.json();
console.log(evidenceData)
// Build Table
function buildTable(data) {
var table = document.getElementById('myTable')
table.innerHTML = data.map(function(row) {
let [country, title, category, date, link, image] = row;
return `<tr>
<td>
<br><br>
<a href="${link}" target='_blank'>
<img class="tableThumbnail" src=${image}><br><br>
</td></a>
<td>
<span class="tableTitle"><br><br><a href="${link}" target='_blank'>${title}</a><br></span>
</td>
<td>${country}</td>
<td>${category}</td>
<td>${date}</td>
</tr>`;
}).join('');
}
$(document).ready(function() {
var oTable = $('.mydatatable').DataTable({
"dom": "<<t>ip>",
"columnDefs": [{
targets: [2, 3, 4],
visible: false,
searchable: true,
}]
});
$('#searchInput').keyup(function() {
oTable.search($(this).val()).draw();
});
})
buildTable(evidenceData)
}
populate();
</script>
This question has accepted answers - jump to:
Answers
Start with this FAQ to get an idea of optoins to increase the speed. You are fetching the data then populating n HTML table then initializing Datatables which also reads/processes all the rows in the HTML table. The first step I would try is to let Datatables fetch the data via
ajaxand populate the table. See the Ajax docs for details.Kevin
Hi @kthorngren, I also did some digging on that option but realise that I need to use client-side processing, as I'm hosting as a static page. I am trying deferRender but it doesn't appear to work. Any ideas?
Are you using
ajaxto load the data?Kevin
@kthorngren I've been trying this but am having no luck. Let me offer a simpler example: If I have this JSON file in the same root folder. Do you know why it is not reading the JSON? This is with client-side processing. The ajax option is in there.
JSON
JS
Are you trying to read the file directly from the file system? If yes this won't work. Web browsers won't allow for directly accessing the file system for security reasons. You need to use a web server to server the file.
Kevin
Thanks @kthorngren