Multiple DataTables on Page Unable - to get property 'parentNode' of undefined or null reference

nukeCoder

When setting stateSave:true, the second table that loads will result in the Unable to get property 'parentNode' of undefined or null reference. The only way I was able to resolve the issue was by changing line 887 of the dataTable js file from:

if (s.nTable == this || ( s.nTHead.parentNode == this) || (s.nTFoot && s.nTFoot.parentNode == this)) {

to

if (s.nTable == this || (s.nTHead && s.nTHead.parentNode == this) || (s.nTFoot && s.nTFoot.parentNode == this)) {

Although I've explicitly created a thead, s.nTHead is null in the settings object. Stepping through the function did not reveal anyplace where nTHead is assigned to the setting oSettings.

HTML:

Head1	Head2	Head3	Head4

The second table is identical, with a different ID
Javascript:

$(table).DataTable({

    stateSave: true,
    colReorder: true,
    select: true,
    serverSide: false,
    scrollY: 300,
    data: null,
    "columns": [
        { "data": "Head1" },
        { "data": "Head2" },
        { "data": "Head3" },
        { "data": "Head4" },

    ],
    stateSaveParams: function (settings, data) {
        data.search.search = '';
    },
    stateSaveCallback: function (settings, data) {
        var setting = { 'Key': 'DataTables_' + settings.sInstance, 'Value': JSON.stringify(data) };

        $.ajax({
            url: 'AddUserSetting',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(setting),
            success: function () {

            }
        })

    },
    stateLoadCallback: function (settings, callback) {
        var data = { 'id': 'DataTables_' + settings.sInstance };

        $.ajax({
            url: 'GetUserSetting',
            datatype: "json",
            data: JSON.stringify(data),
            contentType: 'application/json',
            type: 'POST',
            success: function (result) {
                if (result != '')
                    callback(JSON.parse(result));
                else
                    callback(null);
            }
        })
    }

})

nukeCoder

Messed up the HTML tag in the original post.

HTML:

<div class="col-lg-5">
                    <table class="table table-striped table-bordered table-hover" id="documentsAvailable">
                        <thead>
                            <tr>
                                <th>Head1</th>
                                <th>Head2</th>
                                <th>Head3</th>
                                <th>Head4</th>
                            </tr>
                        </thead>
                    </table>
                </div>