title: jquery DataTable server side add Row not working properly
body: <p>I'm trying to duplicate the example shown here:
  <a href="http://datatables.net/examples/api/add_row.html" rel="nofollow">DataTable t.row.add()</a>
  but using server side for table population:
  here core script:</p>
  
  <pre><code>var wh=window.innerHeight-250;
  var table= $('#dataTable_e').DataTable( {
      "processing": true,
      "serverSide": true,
      "stateSave": true,
      "dom": 'RrtiS&lt;"bottom"&gt;f&lt;"clear"&gt;',
      "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"}
               ]
            });
  </code></pre>
  
  <p>and this works fine.
  then I try to add the new row when clicking a button and this is the script:</p>
  
  <pre><code>        $('#dataTable_e_new').click(function (e) {
          e.preventDefault();
  
          if (nNew &amp;&amp; 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();               
      });
  </code></pre>
  
  <p>but it is not working: I tried several shape of Data but I always get:</p>
  
  <pre><code>DataTables warning: table id=dataTable_e - Requested unknown parameter 'ID' for row 1
  </code></pre>
  
  <p>Clearly I'm not passing the right format but have no idea how to handle :-(</p>
  
  <p>Any suggestion would be appreaciated.
  Thanks for Reading.</p>