Home / Ajax / Populate jQuery Datatable using JSON data

Populate jQuery Datatable using JSON data

In this tutorial we will be looking on how to populate jQuery datatable using JSON data. This is a tricky process but still easy to implement. I’ve seen many posts on stackoverflow where answers are not explained properly or no one could provide an accurate or direct answer. Lately I’ve been thinking of writing a tutorial on the mentioned subject. I believe this tutorial would help many out there! First grab the Datatable library.

You can simply assign values to table rows and start using the features of the datatable but when you add then dynamically. To make this work properly we will be using the datatable function itself in a little modified way using ajax. Before proceeding grab bootstrap css and js from this Bootstrap CDN

Markup

The Design is very straight forward. Simply create a table structure with a head row and foot row. Do not even worry about the styles out Bootstrap.css will take care of it. Just assign the class table table-bordered to the table element.

Now that we have set our HTML properly let us covert the static table into a datatable by initializing the datatable() function on the table id attribute.

Datatable Initialization

Note that we have used id=”jsontable” in the table element.

With the table activated, let us write the Ajax code to fetch the data entries from database via process.php in json format.

AJAX

In the following Ajax script we will be sending fetchdata as method name. When data is returned from process.php in JSON format it is processed by javascript to separate the arrays. You can have a check in the console of your browser for the data structure. We fire the load on a click event of attribute id=”load” of the button.

PHP

This is a very simple process. I have simply fetched each row of the table and fed them into an array ($output). Finally encoded them to json using json_encode()

That’s it! You are ready to test this module…

Download   Preview

About Ashik

I am a Full Stack Developer and love to work on APIs and Apps. Hardcore lover of Ionic and Laravel <3

Check Also

Weather forecast API using jQuery, Ajax and PHP

Weather forecast API is widely used as widgets in small blogs to huge news website …

  • Kamal

    gr8

  • Silvio

    Great solution!

  • Agus Rdz

    Thanks, works fine

  • Daniele De Matteo

    I was going crazy, thank you very much. It’s working perfectly.

  • Marcos

    This solution works with some data, but not many. Eg 10000 lines, will be slow. What is the solution?

  • ziv

    I use the ajax to json but it doesn’t have pagination.
    hot to fix ??
    i use sql server

  • Jay patel

    Thanks

  • andy

    how do i make the table refresh with new data after some time?

    • $(#tableId).html(“”); // clearing the existing data
      $(#tableid).html(data) // asynchronously add your json data to the table

  • Balakumar

    This is Really use one and i have doubt how to add datatable export buttons in this above example datatable

    • You can use tabletools for that

      • Balakumar

        i have to download dataTables.tableTools.js and how to set “sSwfPath”: “../swf/copy_csv_xls_pdf.swf” i am in new learner from dataTable so i dont know how to set this path why we mention this path

        • There are various tutorials about this. Unfortunately is very hard to make you understand in writing. Youtube.

  • meena vinay

    i want to pass parameters to the sql query.so how to pass parameters to the query through ajax call.

    • In the ajax call I have already passed parameters,

      url: ‘process.php?method=fetchdata’,

      You can include your own params too,

      var name = $(‘#name’).val();
      var age= $(‘#age’).val();

      url: ‘process.php?method=fetchdata&name=’+name+’&age=’+age,

      • Meena Vinayakumar

        Hi thanku you for your prompt reply .But iam not getting the results based on these parameters.Anything else i have to add.

        • The method which I have shown the most basic way of making an ajax call with parameters.If you are not receiving expected output then it should be your server side issue. You may check the chrome developer console -> Network -> XHR tab for more info about the ajax call.

          I may help you if you can make a pastie of your ajax call and server side code

  • Mpiesa

    Man Just wanna show the appreciation and love for the website,ur turtorials are informative and explainations are clear describing everything…Bigups

  • Puja Jaiswal

    Very easy to understand and thorough explanation . Much appreciated and thanks a ton!!

  • James Mugo

    Thanks Ashik for this great tutorial.

  • disqus_rUotZOLmWO

    Try this script with 50000 rows and see how slow he will load. Unfortunately these kind of tables are not good for many rows.

  • ᠪᠠᠲᠤᠵᠢᠷᠭᠠᠯ ᠪᠠᠳᠭᠡᠷᠡᠯ

    saaa

Do you wan't to get notified?

I will not spam your inbox. I will only send email whenever I publish a new article or to share information about technology

You have Successfully Subscribed!