How to Make Datatables Faster By Using Ajax

Datatables Ajax Load

Here's how you can make a Datatables not loading all the rows in one page load, but rather doing ajax call per table page.

<html>
<head>
<title>Datatable</title>
<link href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"/>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id ="datatable"></table>
<script>
$("#datatable").DataTable({
    dom: "Bfrtip",
    processing: true,
    serverSide: true,
    ajax : "http://localhost/data",
});
</script>
</body>
</html>

Just simple as that actually, the hard thing you gonna do is on the Server side. In PHP you can check whatever $_POST and $_GET being sent from Datatables, you can get that information to do table filtering, paging, sorting, etc.

In a web desktop based software, displaying tabular data is one thing that we do almost all the time. Making our table sort able, searchable, page able, is a must. We don't want our user to mad at us because the performance not doing good. If you don't now There's Datatables Javascript library.

Since the presence of React, i would say this is kind of approach is kind of old fashion way  to display a table using Javascript. But still people still use it, even me, because it's convenient, simple and easy to do.


Popular posts from this blog

ERROR 1348 Column Password Is Not Updatable When Updating MySQL Root Password

How To Create Spring Boot Project Using Netbeans

Spring Kafka - How to use ReplyingKafkaTemplate send and reply synchronously