Datatable row.Add() not working.

maulikDave

Hi, this is a Quite tricky one, I am using DataTable with Dropdown in every row
Now I want to add a new row on a click event

The DAtatable looks as below...

function BindTable() {
        if ($.fn.DataTable.isDataTable("#tblPool")) {
            $('#blPool').DataTable().destroy();
        }

         table = $("#tblPool").DataTable({
            "destroy": true,
            "serverSide": true,
            "bRetrieve": true,
            "searching": false,
            "order": [1, "asc"],
            "async": true,
            "pagingType": "simple",
            "dom": '',
            "language": {
                "paginate": {
                    "next": '<span><img src="images/next.svg" id="next" alt="next-arrow" /></span>',
                    "previous": '<span><img src="images/previous.svg" id="prev" alt="prev-arrow" /></span>'
                }
            },
            "ajax": {
                "url": "/Pool/GetPoolDetail",
                "type": "Post",
                "datatype": "json",
                "dataSrc": "PoolDetail",
                "data": function (d) {
                    return getSearchValues(d)
                }
            },
            "columns": [
                {
                    "title": "Id", "data": "id", "visible": false, 
                },
                {
                    "title": "resi", "data": "resiId", "visible": true,
                    "render": function (data, type, row) {
                        return resDetails(row.resiId, row.id);
                    }
                },
                {
                    "title": "Unit", "data": "unitId", "visible": true,
                    "render": function (data, type, row) {
                        return unitDetails(row.unitId, row.id)
                    }
                },
                {
                    "title": "Emp Name", "data": "empId", "visible": true,
                    "render": function (data, type, row) {
                        return empDetails(row.empId, row.id)
                    }
                },
              
                Other Columns.......

Each render Functions returns a select List and bind it in row

Now I am trying to add a new row on a button click event

Here is the code...

$('#addRow').on('click', function () {
        var resident = resiDetails(0, 0);
        var unit = unitDetails(0, 0);
        var employee = empDetails(0, 0);

        Other Variables

Now in each above variable, I am getting an HTML string like '<select><option val =1>test</option>></select>'
and at the end I creating a object and put all values in it

  var row = {
            "id": 0,
            "resiId": resident,
            "unitId": unit,
            "empId": employee,
            other Data....
}

 table.rows.add(row).draw(true);

But I am not able to add a new row, No error is showing but New row is also not added...
Please help me with this

kthorngren

For one row where you don't have an array or one or more rows to add use the singular row.add(), no s. If you are adding multiple rows or they are in an array use rows.add().

Kevin

rf1234

rows.add() expects an array.

Since you only want to add one row you could use row.add() which does not expect an array.

https://datatables.net/reference/api/rows.add()
https://datatables.net/reference/api/row.add()

maulikDave

@kthorngren @rf1234 I Tried as you Suggested as below

I tried following ways
* table.row.add(row);
* table.row.add(row).draw();
* table.row.add(row).draw(true);

None of these Works.

rf1234

Pls post a test case showing the issue as per the forum rules.