"Uncaught TypeError: Cannot read property 'settings' of undefined" with SearchPanes 1.1.0

"Uncaught TypeError: Cannot read property 'settings' of undefined" with SearchPanes 1.1.0

Loren MaxwellLoren Maxwell Posts: 387Questions: 94Answers: 10
edited May 2020 in Bug reports

I think this is a possible bug.

Link to test case:
There are two tables on this page. It's the lower one, which doesn't display.

https://ghsfha.org/w/Special:SeasonHome?view=players&season=2019

Debugger code (debug.datatables.net):

Error messages shown:

Uncaught TypeError: Cannot read property 'settings' of undefined
    at Object.g.select.init (datatables.min.js:571)
    at b._serverTotals (datatables.min.js:526)
    at HTMLTableElement.<anonymous> (datatables.min.js:508)
    at HTMLTableElement.dispatch (jquery.min.js:2)
    at HTMLTableElement.v.handle (jquery.min.js:2)
    at Object.trigger (jquery.min.js:2)
    at HTMLTableElement.<anonymous> (jquery.min.js:2)
    at Function.each (jquery.min.js:2)
    at jQuery.fn.init.each (jquery.min.js:2)
    at jQuery.fn.init.trigger (jquery.min.js:2)

Description of problem:

I recently upgraded to SearchPanes 1.1.0 and now get the above error when using SearchPanes.

The following code (which works fine) doesn't use SearchPanes:

$(function() {  
    var table_all_state = $('#table_all_state').DataTable({ 
        "paging": true, 
        "autoWidth": true,  
        "language": {   
            "zeroRecords": "<i class=\"fal fa-fw fa-empty-set\" data-toggle=\"tooltip\" title=\"No records\"></i>", 
            "search": "<i class=\"fal fa-fw fa-search\" data-toggle=\"tooltip\" title=\"Search records\"></i>", 
            "alphabetSearch": { 
                "infoDisplay": "<i class=\"fal fa-fw fa-filter\" data-toggle=\"tooltip\" title=\"Search records\"></i>" 
            }   
        },  
        "columnDefs": [{    
            "targets": "_all",  
            "render": $.fn.dataTable.render.text(), 
            "searchPanes": {    
                "show": false   
            }   
        }], 
        "ajax": {   
            "url": "/wiki/extensions/GHSFHA/models/mPlayersAllState.php",   
            "type": "POST", 
            "data": {   
                "season": "2019",   
                "school": null  
            }   
        },  
        "order": [4, "asc"],    
        "drawCallback": function(s) {   
            if (!this.api().rows().data().any()) {  
                $('#table_all_state_wrapper').children().hide();    
            } else {    
                $('#table_all_state_wrapper').children().show();    
                $('#table_all_state_wrapper .dt-buttons').children().show();    
            }   
        },  
        "columns": [{   
            "data": "source",   
            "name": "source"    
        }, {    
            "data": "selection",    
            "name": "selection",    
            "className": "text-center"  
        }, {    
            "data": "award",    
            "name": "award" 
        }, {    
            "data": "team_name",    
            "name": "team_name" 
        }, {    
            "data": "player_name",  
            "name": "player_name"   
        }, {    
            "data": "organization", 
            "name": "organization"  
        }, {    
            "data": "class",    
            "name": "class" 
        }, {    
            "data": "position", 
            "name": "position", 
            "className": "text-center"  
        }, {    
            "data": "grade",    
            "name": "grade",    
            "className": "text-center"  
        }, {    
            "data": "height",   
            "name": "height"    
        }, {    
            "data": "weight",   
            "name": "weight"    
        }], 
        "scroller": {   
            "loadingIndicator": true    
        },  
        "deferRender": true,    
        "scrollX": true,    
        "scrollY": "80vh",  
        "scrollCollapse": true, 
        "dom": "ftri"   
    }).on("mouseenter", "th, td:not(.child-row-container)", function() {    
        var $this = $(this);    
        if (this.offsetWidth < ($this.textWidth() + 10)) {  
            if (!$this.attr("title")) { 
                $this.attr("title", $this.text());  
            }   
        }   
    }); 
});

And here's the code with SearchPanes added that causes the error (although it worked with SearchPanes 1.0.0):

$(function() {
    var table_all_state = $('#table_all_state').DataTable({
        "paging": true,
        "autoWidth": true,
        "language": {
            "zeroRecords": "<i class=\"fal fa-fw fa-empty-set\" data-toggle=\"tooltip\" title=\"No records\"></i>",
            "search": "<i class=\"fal fa-fw fa-search\" data-toggle=\"tooltip\" title=\"Search records\"></i>",
            "alphabetSearch": {
                "infoDisplay": "<i class=\"fal fa-fw fa-filter\" data-toggle=\"tooltip\" title=\"Search records\"></i>"
            }
        },
        "columnDefs": [{
            "targets": "_all",
            "render": $.fn.dataTable.render.text(),
            "searchPanes": {
                "show": false
            }
        }],
        "ajax": {
            "url": "/wiki/extensions/GHSFHA/models/mPlayersAllState.php",
            "type": "POST",
            "data": {
                "season": "2019",
                "school": null
            }
        },
        "order": [4, "asc"],
        "drawCallback": function(s) {
            if (!this.api().rows().data().any()) {
                $('#table_all_state_wrapper').children().hide();
            } else {
                $('#table_all_state_wrapper').children().show();
                $('#table_all_state_wrapper .dt-buttons').children().show();
            }
        },
        "columns": [{
            "data": "source",
            "name": "source",
/* Add SearchPane to this column */
            "searchPanes": {
                "show": true
            }
        }, {
            "data": "selection",
            "name": "selection",
            "className": "text-center",
/* Add SearchPane to this column */
            "searchPanes": {
                "show": true
            }
        }, {
            "data": "award",
            "name": "award"
        }, {
            "data": "team_name",
            "name": "team_name",
/* Add SearchPane to this column */
            "searchPanes": {
                "show": true
            }
        }, {
            "data": "player_name",
            "name": "player_name"
        }, {
            "data": "organization",
            "name": "organization"
        }, {
            "data": "class",
            "name": "class",
/* Add SearchPane to this column */
            "searchPanes": {
                "show": true
            }
        }, {
            "data": "position",
            "name": "position",
            "className": "text-center",
/* Add SearchPane to this column */
            "searchPanes": {
                "show": true
            }
        }, {
            "data": "grade",
            "name": "grade",
            "className": "text-center"
        }, {
            "data": "height",
            "name": "height"
        }, {
            "data": "weight",
            "name": "weight"
        }],
/* Add SearchPane settings */
        "searchPanes": {
            "cascadePanes": true,
            "layout": "columns-6"
        },
        "scroller": {
            "loadingIndicator": true
        },
        "deferRender": true,
        "scrollX": true,
        "scrollY": "80vh",
        "scrollCollapse": true,
/* DOM adjusted to add SearchPane */
        "dom": "Pftri"
    }).on("mouseenter", "th, td:not(.child-row-container)", function() {
        var $this = $(this);
        if (this.offsetWidth < ($this.textWidth() + 10)) {
            if (!$this.attr("title")) {
                $this.attr("title", $this.text());
            }
        }
    });
});

This question has accepted answers - jump to:

Answers

This discussion has been closed.