DataTable Warning message when adding new row

Question

I am receiving the below error message from DataTables when I have submitted my results from a form and trying to add a new row to the datatable after the results are saved.

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

Here is my datatable

   <!-- .table -->
        <table id="payments" class="table table-bordered table-hover" cellspacing="0" width="100%">
                                            <thead>
                                                <tr>
                                                    <th>Date Created</th>
                                                    <th>Created By</th>
                                                    <th>Payment Type</th>
                                                    <th>Reference Number</th>
                                                    <th>Comment</th>
                                                    <th>Amount</th>
                                                    <th>Delete</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table><!-- /.table -->

Here is initial load of datatable(This loads and works fine)

    var table2 = $("#payments").DataTable({
            ajax: {
                url: "/api/InvoicePayments/" + $('#InvoiceMaster_Id').val(),
                dataSrc: ""
            },
            columns: [
                {
                    data: "dateCreated"
                },
                {
                    data: "createdBy"
                },
                {
                    data: "paymentTypes.name"
                },
                {
                    data: "referenceNumber"
                },
                {
                    data: "comments"
                },
                {
                    data: "amount"
                },
                {
                    data: "id",
                    render: function (data) {
                        return "<button class='btn-link js-delete' data-paymentdetails-id=" + data + ">Delete</button>";
                    }
                }
           ]

        });

  //Delete button
        $("#payments").on("click", ".js-delete", function () {
            var button = $(this);
            bootbox.confirm("Are you sure you want to delete this line?", function (result) {
                if (result) {
                    $.ajax({
                        url: "/api/Payments/" + button.attr("data-paymentdetails-id"),
                        method: "DELETE",
                        success: function () {
                            table2.row(button.parents("tr")).remove().draw();
                        }
                    });
                }
            });
        });

Here is my current code to add new row (fails on paymentTypes.name). When I view responsedata.paymentTypes.name in the console it displays the value I am looking for, so I know it is not null.

            $.ajax({
                url: "/api/Payments",
                type: "POST",
                data: data,
                success: function (respText) {
                    responsedata = respText;
                    console.log(responsedata);
                    console.log(responsedata.dateCreated);
                    console.log(responsedata.paymentTypes.name);
                    console.log(responsedata.referenceNumber);
                    console.log(responsedata.comments);
                    console.log(responsedata.amount);
                    var paymentsTable2 = $('#payments').DataTable();

                    paymentsTable2.row.add( {
                                        "dateCreated":   responsedata.dateCreated,
                                        "createdBy":   responsedata.createdBy,
                                        "paymentTypes.name": responsedata.paymentTypes.name,
                                        "referenceNumber": responsedata.referenceNumber,
                                        "comments":     responsedata.comments,
                                        "amount": responsedata.amount,
                                        "id":       responsedata.id
                    }).draw( false );

                    toastr.success("Payment successfully recorded.");

                },
                error: function () {
                    toastr.error("Something unexpected happened.");
                }
            });

The row does get added but that column is blank. See below

Try removing the dot, use data: "paymentTypesName" in the column definition and when adding the row. — Albondi
Still get same error of DataTables warning: table id=payments - Requested unknown parameter 'paymentTypes.name' for row 11, column 2. For more information about this error, please see datatables.net/tn/4 — Steve Wolfe
Are you sure you changed it everywhere? When adding the new row "paymentTypesName": responsedata.paymentTypes.name, — Albondi
If i change the original load for that column name to paymentTypesNames then it will load the record when saving, but then the initial load of the datatable of all the previous records it fails for those records because it is expecting the dot — Steve Wolfe

Steve Wolfe Steve Wolfe · Accepted Answer · 2020-03-13T12:39:22

After hours of research I found a different way to accommodate this.

$('#payments').append('<tr><td>' + responsedata.dateCreated + '</td><td>' + responsedata.createdBy + '</td><td>' + responsedata.paymentTypes.name + '</td><td>' + responsedata.referenceNumber + '</td><td>' + responsedata.comments + '</td><td>' + responsedata.amount + '</td><td>' + "<button class='btn-link js-delete' data-paymentdetails-id=" + responsedata.id + ">Delete</button>" + '</td></tr>');

DataTable Warning message when adding new row

1 Answers