Error updated a single row in table - Requested unknown parameter '1' for row 0, column 1

moden

I am getting the following error when attempting to update a row in a datatable after a modal dialog:

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

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

The table rendering code is below:

 $("#tblWorkSheetItems tbody tr").remove();
    var vWorkSheet = $("#SelectedWorksheet option:selected").text();
    if (vWorkSheet != null && vWorkSheet != '--- Select a Workseet ---') {

        if (oTableWSItems != null) {
            oTableWSItems.destroy();
        }
        oTableWSItems = $('#tblWorkSheetItems').DataTable({
            "drawCallback": function () {
                $('.btnItemEdit').on("click", function (e) {
                    e.preventDefault();
                    var ws = $("#SelectedWorksheet option:selected").text();
                    var rowdata = oTableWSItems.row($(this).closest('tr')).data();
                    itemrow = oTableWSItems.row($(this).closest('tr')).index();
                    $("#layoutmodal").css("width", "80%");
                    showModal($('#EditWorksheetItemEndPoint').val() + '?worksheet=' + encodeURIComponent(ws.replace(/\s+/g, ' ').trim()) + '&uii=' + encodeURIComponent(rowdata.UII.trim()) + "&pn=" + encodeURIComponent(rowdata.PN.trim()) + "&sn=" + encodeURIComponent(rowdata.SN).trim());
                });
            },
            serverSide: true,
            processing: true,
            sortable: false,
            fixheader: true,
            bInfo: false,
            paging: false,
            searching: false,
            processing: false,
            compact: true,
            noheader: true,
            autoWidth: false,
            searchDelay: 10000,  //set this to high because we don't want it working

            ajax: {
                async: true,
                type: "POST",
                url: $("#GetWorkSheetItemsEndPointName").val(),
                datatype: "json",
                contentType: "application/json; charset=utf-8",
                headers: {
                    "__RequestVerificationToken": $('input[name=__RequestVerificationToken]').val(),
                },
                data: function (data) {
                    data.WorkSheet = vWorkSheet;
                    data.sort1 = vSort1;
                    data.sort2 = vSort2;
                    data.sort3 = vSort3;
                    data.sort4 = vSort4;
                    data.sEcho = "echoWorksheetItems";
                    data.draw = "drawWorksheetItems";
                    data.__RequestVerificationToken = $('input[name=__RequestVerificationToken]').val();
                    return data = JSON.stringify(data)
                },
            },

            "columnDefs": [{   //this parameter allows you to assign specific options to columns in the table https://datatables.net/reference/option/columnDefs
                "targets": [0],
                "render": function (data, type, row, meta) {
                }
            
            }],

            columns: [
                        {
                            data: null,
                            render: function (data, type, row) {
                                if ( type === 'display') {
                                    return '<input type="checkbox" class="editor-active">';
                                }
                                return data;
                            },
                            className: "dt-body-center",
                            orderable: false
                        },
                        {
                            render: function (data, type, row) {
                                if (type === 'display') {
                                    if (row.Error == null || row.Error == '' || row.Error.toUpperCase() == 'FALSE' || row.Error.toUpperCase() == '0') {
                                        return '<input type="image" class="btnItemEdit" name="btnItemEdit" src="img/checkmark.gif" align="center" />';
                                    }
                                    else {
                                        return '<input type="image" class="btnItemEdit" name="btnItemEdit" src="img/cancel.gif" align="center" />';
                                    }
                                }
                                return data;
                            },
                            className: "dt-body-center",
                            orderable: false
                        },
                        { "data": "Model", "orderable": false },
                        { "data": "PN", "orderable": false, "width": "200px" },
                        { "data": "SN", "orderable": false, "width": "200px" },
                        { "data": "Nomenclature", "orderable": false, "width": "200px" },
                        { "data": "UII", "orderable": false, "width": "200px" },
                        { "data": "Status", "orderable": false, "width": "100px" },
                        { "data": "NSN", "orderable": false, "width": "100px" },
                        { "data": "UCN", "orderable": false, "width": "100px" },
                        { "data": "Other", "orderable": false, "width": "100px" },
                        {
                            render: function (data, type, row) {
                                if (type === 'display') {
                                    return '<img name="btnAdd_Mark" src="img/add_mark_2.jpg" align="center" alt="Add Mark" />';
                                }
                                return data;
                            },
                            className: "dt-body-center",
                            orderable: false
                        }

                    ],
                    select: {
                        style: 'os',
                        selector: 'td:not(:last-child)'
                    }


        });

The row update code is below:

$('#myModal').on('hidden.bs.modal', function (e) {
    if (modalReturnedObj != null && $.isNumeric(itemrow)) {
        oTableWSItems.row(itemrow).cell(0).render('<input type="checkbox" class="editor-active">');
        if (modalReturnedObj.Error == null || modalReturnedObj.Error == '' || modalReturnedObj.Error.toUpperCase() == 'FALSE' || modalReturnedObj.Error.toUpperCase() == '0') {
            oTableWSItems.row(itemrow).cell(1).render('<input type="image" class="btnItemEdit" name="btnItemEdit" src="~/img/checkmark.gif" align="center" />');
        }
        else {
            oTableWSItems.row(itemrow).cell(1).render('<input type="image" class="btnItemEdit" name="btnItemEdit" src="~/img/cancel.gif" align="center" />');
        }
        oTableWSItems.row(itemrow).data().PN = modalReturnedObj.PN;
        oTableWSItems.row(itemrow).data().SN = modalReturnedObj.SN;
        oTableWSItems.row(itemrow).data().Nomenclature = modalReturnedObj.Nomenclature;
        oTableWSItems.row(itemrow).data().UII = modalReturnedObj.UII;
        oTableWSItems.row(itemrow).data().NSN = modalReturnedObj.NSN;
        oTableWSItems.row(itemrow).data().UCN = modalReturnedObj.UCN;
        oTableWSItems.row(itemrow).data().Other = modalReturnedObj.Other;
        oTableWSItems.row(itemrow).data().Model = modalReturnedObj.Model;
        oTableWSItems.row(itemrow).data().Status = modalReturnedObj.Status;
        oTableWSItems.row(itemrow).cell(11).render('<input type="image" class="btnItemEdit" name="btnItemEdit" src="~/img/cancel.gif" align="center" />');
        oTableWSItems.row(itemrow).draw();
    }
});

allan

You've got data: null, for the first column. You need to do that for the two other columns where you don't define a data point - otherwise DataTables will use its default, which is to use an array index.

Allan