Initialisation of table which render as ajax

jigar311982

Hello,

I am fetching HTML form which has datatables on the button-click event, that means datatable will not initialise on page load. $data contains form with datatable(HTML)

        $(".addBillButton").on('click', function() {            
            jQuery.ajax({
                url: "/purchases/render_bill_form",
                type: "POST",
                success:function(data){
                    $data = $(data); // the HTML content that controller has produced
                    $('#billformcontainer').hide().html($data).fadeIn();
                    $('.selectpicker').selectpicker();
                }
            });
        });

Once the form is arrived with above code, i am adding row with below code, and then it shows below error.
DataTables warning: table id=billitems_list - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

I guess, because table is not init when i fetch from,

                        var table = $('#billitems_list').DataTable();
                    
                        table.row.add( {
                            "billitem_id":   data.response.billitem_id,
                            "billitem_name":  data.response.billitem_name,
                            "billitem_quantity":     data.response.billitem_quantity,
                            "billitem_rate": data.response.billitem_rate,
                            "billitem_tax": data.response.billitem_tax,
                            "billitem_total":  data.response.billitem_total,
                            "item_action":  'delete'
                        } ).draw(false);

How can i init table after fetching form table from server?

Thanks,

jigar311982

I got my answer :-)
I have called datatable init function inside AJAX sucess, means after HTML is added in page.