Search code examples
datatablerowadditionmessage

DataTable adding row alert error "Requested unknown parameter"


Here is the error prompt when I try to add a new row in my DataTable.

DataTables warning: table id=table-workshops - Requested unknown parameter 'name' for row 39, column 0. For more information about this error, please see http://datatables.net/tn/4

HTML

<table class="table table-bordered table-striped table-hover js-basic-example" id="table-workshops">
    <thead>
        <tr>                    
            <th>Workshop</th>
            <th>Number</th>
            <th>Category</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

jQuery

var workshops = JSON.parse(workshops_get());
var table = $('#table-workshops');

table.DataTable({
    destroy: true,
    data: workshops,
    pageLength: 5,
    columns: [
        {data: 'name',},
        {data: "number",},
        {data: "category",},
    ],
    order: [[0, 'asc']]
});

$(document).on('click', '.workshop-add', function(){
    table.DataTable().row.add(['test', 'test', 'test']).draw();
});

Here is my table with loaded data (fine)

myTable

Here is my table with a new row but empty

enter image description here

I look at the multiple answers on the web but didn't find the solution for me. I followed the doc of the official DataTable website. https://datatables.net/examples/api/add_row.html

Did anyone know where is the issue ? Thank you.


Solution

  • The solution given by @andrewJames worked, here is the correct code :

    $(document).on('click', '.workshop-add', function(){
        table.DataTable().row.add( {"name":'test', "number":'test', "category":'test'} ).draw();
    });
    

    And here is the result :

    enter image description here