How to load json to datatables on jquery on click function?

Question

I have json data like this and now i need to feed this json data into datatables whenever the search button is clicked based on sending values.

[
{
       "port_code":"BOM",
       "cont_details_id":"9",
       "price":"44.000",
       "cont_price":"500",
       "cont_no":"11",
       "cont_size":"20",
       "cont_type":"GP"
},
{
       "port_code":"BOM",
       "cont_details_id":"10",
       "price":"87.000",
       "cont_price":"500",
       "cont_no":"22",
       "cont_size":"20",
       "cont_type":"GP"        
},
.....
.....
etc.,
]

and this is what i tried in jquery to store json $("#search").click(function() in this function i am calling json file and tried to store in datatables, but its not working. please someone help me from this. Thank you.

$(document).ready(function() 
    {

    var oTable = $('#example').DataTable();

    $("#search").click(function()
    {
        $.post("invoice_ajax.php",
        {
            loc  : $("#location").val(),
            cust : $("#customer_details_id").val()
        },
        function(data)
        {
            $("#text").html(data);
            var s = JSON.parse(data);

                        for(var i = 0; i < s.length; i++) 
                        {   
                            oTable.fnAddData([
                            s[i].block_id,
                            s[i].block_id,
                            s[i].block_id,
                            s[i].block_id,
                            s[i].block_id,
                            s[i].block_id,
                            s[i].block_id
                            ]);
                        } // End For
        });
    }); 


    });

davidkonrad · Accepted Answer · 2015-04-29 13:37:00Z

1

You are almost right, except you are using the old 1.9.x fnAddData method on a 1.10.x API. Do this instead :

oTable.row.add([
   s[i].port_code,
   s[i].cont_details_id,
   s[i].price,
   s[i].cont_price,
   s[i].cont_no,
   s[i].cont_size,
   s[i].cont_type
]).draw();

or

var oTable = $('#example').dataTable();
...
oTable.fnAddData([
   s[i].port_code,
   s[i].cont_details_id,
   s[i].price,
   s[i].cont_price,
   s[i].cont_no,
   s[i].cont_size,
   s[i].cont_type
]);

answered Apr 29, 2015 at 13:37

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Munna Babu Over a year ago

Thank You So Much :) can you please do me another help ?? :-) what is code to clear table, when the value change i need to clear table and change value again @davidkonrad

davidkonrad Over a year ago

@Munna, you are welcome! Thank you for accepting the answer. To clear the table, simply oTable.clear() or oTable.clear().draw() - see a list of helpful API functions here -> datatables.net/reference/api

Collectives™ on Stack Overflow

How to load json to datatables on jquery on click function?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related