s.nTHead.parentNode == this || (s.nTFoot && s.nTFoot.parentNode == this) ) leads to Uncaught TypeError: Cannot read property parentNode of null

Question

我有一个 jQuery 数据表，当您第一次访问它时，它会在页面加载时正确加载。 jQuery DataTable 将包含所有正确的数据。我还能够成功地向 DataTable 添加一个新行。但是，当您尝试对现有行进行进一步编辑时，出现以下错误：

这里是 html table 代码：

  <div class="row">
                            <div class="table-responsive">
                                <table id="LogEventsTable" style="overflow-x: hidden !important; overflow-y: auto !important;" class="table table-striped panel panel-info">
                                <thead>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>

这是每次进行编辑时都会调用的 LoadLogEventsTable 函数：

  var LoadLogEventsTable = function (sortColumn, isDescending, logId) {
            $('#LogEventsTable').DataTable({
                "aoColumns": [
                                 { "sTitle": "#" },
                                 { "sTitle": "LogEventValueId" },
                                 { "sTitle": "Status Code" },
                                 { "sTitle": "Start Time (24 hr clock)" },
                                 { "sTitle": "End Time (24 hr clock)" },
                                 { "sTitle": "Duration" },
                                 { "sTitle": "Latitude" },
                                 { "sTitle": "Longitude" },
                                 { "sTitle": "Location Description" },
                                 { "sTitle": "Remarks" },
                                 {
                                     // credit to http://legacy.datatables.net/usage/columns
                                 // (mData) This property can be used to read data from any JSON data source property,
                                 // including deeply nested objects / properties. mData can be given in a 
                                 // number of different ways which effect its behaviour: 
                                 // null - the sDefaultContent option will be used for the cell
                                 // (null by default, so you will need to specify the default
                                 // content you want - typically an empty string). This can be
                                 // useful on generated columns such as edit / delete action
                                 // columns.
                                 "mData": null,
                                 "mRender": function (obj) {
                                     //  var userId = obj[0].toString();
                                     // alert(obj.DT_RowId);
                                     return '<a href="#" id="' + obj.DT_RowId + '" onclick="ViewLogEventHistory(this)"  >Log Event Hist</a>';
                                     //   return '<a href="#" id="' + obj.DT_RowId + '" onclick="ViewParticularLogsInfo(this)"  >Edit</a>';
                                 }
                             },
                             {
                                 // credit to http://legacy.datatables.net/usage/columns
                                 // (mData) This property can be used to read data from any JSON data source property,
                                 // including deeply nested objects / properties. mData can be given in a 
                                 // number of different ways which effect its behaviour: 
                                 // null - the sDefaultContent option will be used for the cell
                                 // (null by default, so you will need to specify the default
                                 // content you want - typically an empty string). This can be
                                 // useful on generated columns such as edit / delete action
                                 // columns.
                                 "sTitle": "Edit",
                                 "mData": null,
                                 "mRender": function (obj) {
                                     //  var userId = obj[0].toString();
                                     // alert(obj.DT_RowId);
                                     return '<a href="#" id="' + obj.DT_RowId + '" onclick="EditLogEvent(this)"  >Edit</a>';
                                     //   return '<a href="#" id="' + obj.DT_RowId + '" onclick="ViewParticularLogsInfo(this)"  >Edit</a>';
                                 }
                             },
            ],
            "aoColumnDefs": [{ "bVisible": false, "aTargets": [1, 6, 7, 9, 10] }],
            "fnDrawCallback": function (oSettings) {

                var pgr = $(oSettings.nTableWrapper).find('.dataTables_paginate');
                var scrbdy = $(oSettings.nTableWrapper).find('.dataTables_scrollBody');

                scrbdy.css('overflow-x', 'hidden !important');
                scrbdy.css('overflow-y', 'auto !important');

                if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay()) {
                    pgr.hide();
                } else {
                    pgr.show()
                }
            },
            "iDisplayLength": 10,
            "sDom": '<"clear">frtip',
            "bProcessing": true,
            "bServerSide": false,
            "bLengthChange": false,
            "bPaginate": true,
            "bDestroy": true,
            "bSort": false,
            "bInfo": true,
            "bFilter": false,
            "sAjaxSource": 'ParticularLogsDetails.aspx/BindLogEventsTable',
            "bJQueryUI": true,
            "bDeferRender": true,
            "sPaginationType": "full_numbers",
            "fnServerParams": function (aoData) {
                aoData.push(
                            { "name": "sortColumn", "value": sortColumn },
                            { "name": "isDescending", "value": isDescending },
                            { "name": "logId", "value": logId }
                );
            },
            "fnServerData": function (sSource, aoData, fnCallback) {
                $.ajax({

                    "dataType": 'json',
                    "contentType": "application/json; charset=utf-8",
                    "type": "GET",
                    "url": sSource,
                    "data": aoData,
                    "success":
                            function (msg) {
                                var obj = jQuery.parseJSON(msg.d);
                                //    alert(msg.d);
                                fnCallback(obj);

                                //if (null == $('#LogEventsTable').DataTable()) {
                                //    alert("log events table is Null");

                                //}

                                var displayDataTable = $('#LogEventsTable').DataTable();
                                // var versionNo = $.fn.dataTable.version;
                                // alert(versionNo);
                                if (obj.loggedInUserRole == 2 || obj.isFrozen == true) {
                                    displayDataTable.columns([11]).visible(false);
                                    $('#btn-AddNewEventSecondOuterDiv').css('display', 'none');
                                    $('#btn-AddNewEventOuterDiv').css('display', 'none');
                                    $('#btn-AddNewEvent').css('display', 'none');
                                    $('#btn-LogEditSecondOuterDiv').css('display', 'none');
                                    $('#btn-LogEditOuterDiv').css('display', 'none');
                                    $('#btn-LogEdit').css('display', 'none');
                                } // end if (obj.loggedInUserRole == 2) 


                            },

                    beforeSend: function () {
                        $('.loader').show()
                    },
                    complete: function () {
                        $('.loader').hide()

                    }
                });
            }
        })
    } 

谁能告诉我如何解决上述错误？

Answer 1

全部：

我认为问题在于 jQuery DataTables，重要的是 你用标签填充 HTML 声明，它是 相应的 header 标题行如下所示，即使我们可能 以编程方式在 JavaScript:

中指定 Header 标题行

                        <table id="aTable" class="table
table-striped">
                            <thead>
                                <tr>
                                    <th>Vehicle Reg. No.</th>
                                    <th>Date</th>
                                    <th>Driver Name</th>
                                    <th>Total Defects </th>
                                    <th>Open Defects</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>