DataTables.js Requested unknown parameter when adding row

Question

I have a predefined datatable on my page that is populating from data with an ajax call. After these values are on the page the user needs an ability to add rows by clicking a button, kind of like an audit log. However, every time I go to add a row I get the error

"DataTables warning: table id=DataTables_Table_0 - Requested unknown parameter 'data1' for row 2, column 0."

I have been up and down the internet and cannot figure this out. Help please.

I have the table variable defined globally so everyone has access to it

var escalationTable;

and then a function that calls my ajax to populate said table.

 function populateTable(var1, var2, var3, var4, var5, var6, var7) {
            $.ajax({
                dataType: 'json',
                //data: id,
                type: 'GET',
                async: false,
                url: baseUrl + 'rest/partUrl/action?var1=' + var1 + '&var2=' + var2 + '&var3=' + var3 + '&var4=' + var4,
                success: function (data) {
                    if (data) {


                        escalationTable = $('.escalationTable').DataTable({
                            data: data,
                            columns: [
                                {
                                    data: "data1" ? "data1" : null
                    },
                                {
                                    data: "data2" ? "data2" : null

                    }, {
                                    data: "data3" ? "data3" : null
                    }
                ],
                            bSort: false
                        });



                    }
                },
                error: function (request, status, error) {
                    showErrorMessage(request);
                }
            });
        }

html

<table class="table escalationTable col-md-12" style="width:100%;">
                                                                <thead>
                                                                    <tr>
                                                                        <th name='esId' scope="col">#</th>
                                                                        <th name='esUser' scope="col">User</th>
                                                                        <th name='esDate' scope="col">Date</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                </tbody>
                                                            </table>

and then my click looks like this

$('.assignToSelf').on('click', function () {
        var rowNode = escalationTable
            .row.add({
                "esId": 'ffffff',
                "esUser": 'dfsdfsdf',
                "esDate": 'fffff'
            })
            .draw(false)
            .node();

    })

It produces this error if the data source object for the row had no esId parameter or the data was null or undefined (from documentation ) You should check both clues.. — bigless
@bigless I have read the documentation. I am passing string values...so that shouldn't be the issue unless I'm missing something. — zazvorniki
@MuhammadOmerAslam added html. It's a basic table....nothing special. — zazvorniki
just wanted to see the exact number of columns in the header, so tell me what is data1, data2 and data3 as you are defining the columns for the table the following way data: "data1" ? "data1" : null which will evaluate to data:data1 always, and that is where it is raising the exception why are you doing this,is that even valid ? @zazvorniki — Muhammad Omer Aslam

zazvorniki zazvorniki · Accepted Answer · 2018-01-09T14:55:56

The answer to this question would be naming the fields in the add the same as the data that is going into the field. Not based on the name of the field.

$('.assignToSelf').on('click', function () {
        var rowNode = escalationTable
            .row.add({
                "data1": 'ffffff',
                "data2": 'dfsdfsdf',
                "data3": 'fffff'
            })
            .draw(false)
            .node();

    })

DataTables.js Requested unknown parameter when adding row

1 Answers