jquery DataTable server side add Row not working properly

Question

I'm trying to duplicate the example shown here: DataTable t.row.add() but using server side for table population: here core script:

var wh=window.innerHeight-250;
var table= $('#dataTable_e').DataTable( {
    "processing": true,
    "serverSide": true,
    "stateSave": true,
    "dom": 'RrtiS<"bottom">f<"clear">',
    "pagination":false,
    "scrollY": wh+"px",
    "scrollX": true,
    "deferRender": true,
    "displayStart":0,
    "ajax": 
    {
        "url": "ajax/jsTable.asp",
        "data": function (d) {
            d.myKey="Alerts";
        }
    },
    "drawCallback": function( settings ) {

        $('#control-wraps a').fontSizer();
     },

    "columns": [
                {"data": "ID"},
                {"data": "WidgetID"},
                {"data": "Active"},
                {"data": "LangID"},
                {"data": "ValidFrom"},
                {"data": "ValidTo"},
                {"data": "BkgColor"},
                {"data": "TextColor"},
                {"data": "FontFamily"},
                {"data": "FontSize"},
                {"data": "Height"},
                {"data": "Rows"},
                {"data": "Message"}
             ]
          });

and this works fine. then I try to add the new row when clicking a button and this is the script:

        $('#dataTable_e_new').click(function (e) {
        e.preventDefault();

        if (nNew && nEditing) {
            if (confirm("Previose row not saved. Do you want to save it ?")) {
                saveRow(table, nEditing); // save
                $(nEditing).find("td:first").html("Untitled");
                nEditing = null;
                nNew = false;

            } else {
                table.fnDeleteRow(nEditing); // cancel
                nEditing = null;
                nNew = false;

                return;
            }
        }

        //var aiNew = 
        table.row.add(
            [ {"ID": "2"},
              {"WidgetID": "System Architect"},
              {"Active": "$320,800"},
              {"LangID": "2011/04/25"},
              {"ValidFrom": "Edinburgh"},
              {"ValidTo": "5421"},
              {"BkgColor": "red"},
              {"TextColor": "green"},
              {"FontFamily": "Arial"},
              {"FontSize": "50"},
              {"Height": "300"},
              {"Rows": "3"},
              {"Message": "Test"}             
            ]
           ).draw();               
    });

but it is not working: I tried several shape of Data but I always get:

DataTables warning: table id=dataTable_e - Requested unknown parameter 'ID' for row 1

Clearly I'm not passing the right format but have no idea how to handle :-(

Any suggestion would be appreaciated. Thanks for Reading.

Answer 1

If you define "columns" as object, then you should add an object not array. You've added neither array, nor single object, but array of objects. So use

table.row.add({
  "ID": "2",
  "WidgetID": "System Architect",
  "Active": "$320,800",
  "LangID": "2011/04/25",
  "ValidFrom": "Edinburgh",
  "ValidTo": "5421",
  "BkgColor": "red",
  "TextColor": "green",
  "FontFamily": "Arial",
  "FontSize": "50",
  "Height": "300",
  "Rows": "3",
  "Message": "Test"
})
.draw();