Cannot read property 'cell' of undefined

s.ricardo1122

Link to test case:
I Try to add new 3 column on the html
Debugger code (debug.datatables.net):
-- javascript

var table = $('#tblServiceNumbersContent').DataTable({
                "responsive": true,
                "dom": '<"top"pl>rt<"bottom"fi><"clear">',
                "searching": false,
                "ordering": false,
                "bInfo": false,
                "lengthChange": false,
                language: {
                    processing: '<i class="fa fa-spinner fa-spin fa-2x fa-fw"></i>'
                },
                "processing": true,
                "serverSide": true,            
                searchDelay: 1500,
                "ajax":
                {
                    "url": "expensemanagement.aspx/GetServiceNumbersFromBillDetails",
                    "contentType": "application/json",
                    "type": "POST",
                    "dataType": "JSON",
                    "data": function (d) {
                        var param = JSON.stringify({
                            billId: billId,
                            draw: d.draw,
                            offsetRow: d.start,
                            fetchRow: d.length,
                            searchCriteria: ""//$('#serviceNumberContentFilter').val()
                        });             
                        return param;
                    },
                    "dataSrc": function (json) {
                        json.draw = json.d.draw;
                        json.recordsTotal = json.d.recordsTotal;
                        json.recordsFiltered = json.d.recordsFiltered;
                        json.data = json.d.data;

                        $('#expense-management-window').waitMe('hide');

                        //loadHideColumns(table);

                        var return_data = json;
                        return return_data.data;
                    },
                    "beforeSend": function () {
                        // Here, manually add the loading message.
                        $('#tblServiceNumbersContent > tbody').html(
                            '<tr class="odd">' +
                            '<td valign="top" colspan="6" class="dataTables_empty">Loading&hellip;</td>' +
                            '</tr>'
                        );
                    }
                },
                "columns": [
                    { "data": "InventoryId" }, -- new 
                    { "data": "CircuitTypeId" }, -- new 
                    { "data": "LocationId" },    -- new
                    { "data": "ServiceNumber" },
                    { "data": "ChargeAmount" },                  
                    { "data": "ActionDisplay" }
                ],
                "action": function (e, dt, node, config) {
                    var data = oTable.rows({ selected: true }).data();
                    console.log("data---" + data);
                }
            });

--end javascript

-- html

    <table id="tblServiceNumbersContent" class="table table-bordered table-hover table-sm table-scroll">
        <thead class="thead-dark">
            <tr>
                <th>InventoryId</th> -- new
                <th>CircuitTypeId</th> -- new
                <th>LocationId</th> -- new
                <th class="text-center">
                    Service Numbers &nbsp;
                    <i id="toggleSeviceNumberFilter" class="glyphicon glyphicon-search"></i>
                </th>
                <th class="text-center">Charge Amount</th>
                <th class="text-center" style="z-index:2;">
                    <i id="toggleServiceNumbersModal" class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#serviceNumbersModal"></i>
                </th>

            </tr>
            <tr id="serviceNumberFilterRow">
                <td colspan="4">
                    <input id="serviceNumberContentFilter" type="text" class="form-control input-sm" />
                </td>
            </tr>
        </thead>
        <tbody id="tblServiceNumbersContentBody">
            <!--selected service numbers (from modal) are loaded here-->
        </tbody>
        <tfoot id="tblServiceNumbersContentFooter">
            <!--Table footer (totals) are being added dynamically-->
        </tfoot>

    </table>

Error messages shown:
Description of problem:
The datatables working before on our project but when i try to add this 3 new column I encounter this error I don't know how fix it. but when i removed that 3 columns it works fine but i need that 3 column on my display

Edited by Kevin:  Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

In the second header row you have:

        <tr id="serviceNumberFilterRow">
            <td colspan="4">
                <input id="serviceNumberContentFilter" type="text" class="form-control input-sm" />
            </td>
        </tr>

By default Datatables will bind the sorting listeners to the last row in the header. You can move this to the top row to fix the problem. See the Complex Headers example for more details.

Kevin