How to dynamically add a row without "Requested unknown parameter" error

Question

I am new to DataTables and I am having problems in dynamically adding a new row to the datatable.

Here is my initialization:

table = $("#college-list").DataTable({
    'ajax': {
       'url': 'admin/get_college',
       'type': 'GET'
    },
    'columns': [
       { 'data': 'college_abbrev', "bSortable": true  },
       { 'data': 'college_name' , "bSortable": true },
       {
         "mData": null,
         "bSortable": false,
         "mRender": function(data, type, college) {
            return '<button type="button" class="btn btn-primary edit-college table-condensed">Edit</button>'
                   +'<button data-id="' + college.college_id  + '" type="button" class="delete-college btn btn-primary table-condensed" href="">Delete</button>';
          }
       }
    ]
});

Here is the sample code that I am using when adding a new row (ca, cn, and college_id are variables):

table.row.add( [
    {
       "college_abbrev": ca,
       "college_name": cn,
       "button":'<button type="button" class="btn btn-primary edit-college table-condensed">Edit</button>'
                +'<button data-id="' + college_id  + '" type="button" class="delete-college btn btn-primary table-condensed" href="">Delete</button>'
    }
]).draw();

It creates a row but the columns are empty except for the buttons and it gives the following error:

DataTables warning: table id=college-list - Requested unknown parameter 'college_abbrev' for row 17

How do you properly add a new row?

Answer 1

Use the code below instead:

table.row.add({
   "college_abbrev": ca,
   "college_name": cn,
   "college_id": college_id
}).draw();

You're getting "Requested unknown parameter" error because you're passing array of objects to row.add(), where you should pass simple object instead, see row.add() for more information.

Also you don't need to construct a button in a call to row.add(). Your mRender function will take care of it for you. Instead you need to pass college_id because mRender will need it to produce a button.

Generally, you need to pass row data to row.add() in the same format your Ajax script admin/get_college uses.