DataTables API

So as some of y’all might know, I am currently interning with an e-commerce company that handles India’s public procurement. Well, the company runs almost a thousand checks on its database every day and logs it into a SQL database. The logs contain the ID, date/time, state (error or successful), description, etc., of those checks. Now I was given the job to build a web application that runs these checks on the database, logs it into a table, and then generates a UI for this table so that the Database Management team can fix any errors that exist.

The Back-End

The Back-End, again, is completely written using Node.js, and I am using Express to build the web application. The Back-End is actually quite simple — the application runs some SQL procedures on the database, stores the results of each procedure into an object, and then creates an array of objects to insert into an SQL table — although creating and testing the SQL procedures has taken a significant amount of my time. Now that I had the SQL table, the only thing left was to create a UI for it.

The Front-End

Using EJS, I displayed all the data in a simple, paginated HTML table. Next, I had to build the sorting, filtering, searching, etc. options for the table. Now, one way to do this is to write these operations yourself and include them in the UI. The other better, convenient, and faster way of doing this is using DataTables.

Note: If you don’t know how much data you are dealing with, it is better to write these operations yourself in the server-side to prevent an overflow. However, in this case, the data entries are fixed so this is fine.

DataTables

DataTables is a plug-in for jQuery that helps you make interactive tables for web apps and adds advanced operations on the data. It is extremely simple to start.

Add the DataTables CDN to your HTML file (along with jQuery of course)

<script src=" https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js "></script>

Next, using three lines of jQuery, you can initialise DataTables

$(document).ready(function () {
  $("#log_table").DataTable();
});

They also have a pretty amazing API that can add a myriad of features to your table. This is what mine looked like.

I can’t show you parts of the data because it is sensitive and I have signed an NDA.

Summary

So this is it: a flexible, easy-to-understand API that you can use to enhance HTML Tables. In the next few posts, I will be sharing a post about the power of habits and more Poker!