How to add row to DataTable from Json object in ajax success response

mayurib

Hi,

I have a HTML table in one of the VIEW with 7 data columns and last column have buttons(Actions). Initially it loads and displays data from model collection and I am converting it to Jquery DataTable in $(document).ready() function. So the datatable gets converted and displayed successfully when view is rendered.
Further I have a Add New Record form section below this table and I want to add multiple rows to the datatable through this section. While adding new records on 'onclick' of a Save button I am making ajax call to controller and returning newly added records collection in Json format (return Json(new { Status = "Success", Data = Tasks }, JsonRequestBehavior.AllowGet);
But I am facing issue while adding this object to datatable. Below is my code in $.ajax({... success: section

        if (response.Data != null) {
                    var taskData = response.Data;
                    var taskTable =  $('#tasksTable').DataTable();
                    taskTable.row.add([
                                taskData.Col1, 
                                taskData.Col2,
                                taskData.Col3,
                                taskData.Col4,
                                taskData.Col5,
                                taskData.Col6,
                                taskData.Col7,
                                "Actions" : "FIXME"     //added this line by refering to one of the solution on google. no idea how to add      
                                                                    buttons in column dynamically
                     ] ).draw();
                }

1. What is the exact syntax of adding rows to datatable through javascript. Saw many different ways of doing it on google and none is working for me. sometimes it say add method is undefined. sometimes it say 'datatables warning table id example requested unknown parameter '0' for row 4, column 0.' i am getting this error with above syntax. sometimes it was adding multiple rows with all null columns at the top of the table.
2. How can we add action buttons to datatable dynamically?
3. What should I use .dataTable() or .DataTable()?

Please suggest a correct solution as I have already spent lot of time on this and got no success.

Thanks.

datahandler

Hi,

From your description, it looks like you are using Microsoft MVC?
If so, what I do is create a partial view that contains the rows to add and request the view via an ajax call to my controller. With the response, I do the following:

var $data = $(response);
    for (var i = 0; i < $data.length; i++) {
        if ($data[i] instanceof HTMLTableRowElement) {
            table.row.add($data[i]);
        }
    }

 table.draw();

With regards to action buttons, I create these in the partial view also, then bind to their click event once I have added the rows to the datatable.