Reporting REST data with DataTables and Bootstrap

    Recently, I was requested to make a webpage to report data consumed via JSON to do a demonstration of RESTful architectures. I am not really a web developer so the challenge was interesting, yet easy enough so it wouldn’t take too much time.

    Ultimately, I made a very simple table-based report with a jQuery plugin named dataTables. This plugin has very weird behaviours, but a nice look and feel. It also offers integration with Bootstrap, and together they provide some interesting results. As you can see in the demo, the plugin allows to order by columns and do quick searches, which is nice.

    Of course, I wanted the report to be updated every time the JSON source changed. In other words, the code should be future-proof enough that it could handle when records are added, edited or deleted from the JSON file. This may seem very obvious, but when I was doing research about how to do it, I found weird suggestions, like parsing the REST data in the backend and then basically hardcoding it in the HTML. This is the result.

    This is the code:

This is some data from the JSON data source, just so you can see the format:

This was an interesting little project, it was obviously not made by a professional web developer, so if you have any suggestions, please go ahead and leave a comment.

4 thoughts on “Reporting REST data with DataTables and Bootstrap”

  1. Thank you for the share! I need to do something quite similar (or not?). That is, my JSON source needs to be, ultimately generated by some sort of “listen” or something that changes, dynamically, in a MS SQL Server DB. Thus, I need the RESTful JSON to “update” whenever I call it with the web page (app). Is that possible? Or is that an entirely different process?

    1. Hello Roland, thanks for your comment!
      If you are generating your JSON data according to the data in your MS SQL Server DB, it would be just a matter of updating the JSON itself, and the bootstrap/datatables page should be updated automatically. That is what I meant by “I wanted the report to be updated every time the JSON source changed.”
      Let me try to explain better: I am not sure how you are generating you JSON, but maybe you can update it every time your table/DB is updated (maybe with a trigger? I am not an expert on databases, but that should work). Once the JSON is updated, then you would only need to refresh the webpage to see the changes.
      Let me know if that helps.

      1. you can create code on your server that generates JSON structured output based on data being pulled from the database. With Datatables you can dynamically pull this data using AJAX. That way you can refresh the data on your page even without reloading it, just by reloading the data with an AJAX call. It’s actually quite cool!

Leave a Reply