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

Spring Kafka - How to use ReplyingKafkaTemplate send and reply synchronously

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

How To Create Spring Boot Project Using Netbeans