I get errors filling a data table first with one number of columns, then with another number

PeterB

If I refill a datatable with the same columns and different data, I have no problem. But if I refill a datatable with fewer columns, I get an error in the jquery.datatables.js. If I refill with more columns than the previous run, I get a different error.

Changing to show fewer columns errors in jquery.datatables.js at line 1171:

        /* HTML5 attribute detection - build an mData object automatically if the
         * attributes are found
         */
        if ( rowOne.length ) {
            var a = function ( cell, name ) {
                return cell.getAttribute( 'data-'+name ) !== null ? name : null;
            };

            $( rowOne[0] ).children('th, td').each( function (i, cell) {
                var col = oSettings.aoColumns[i];

                if ( col.mData === i ) {
                    var sort = a( cell, 'sort' ) || a( cell, 'order' );
                    var filter = a( cell, 'filter' ) || a( cell, 'search' );

                    if ( sort !== null || filter !== null ) {
                        col.mData = {
                            _:      i+'.display',
                            sort:   sort !== null   ? i+'.@data-'+sort   : undefined,
                            type:   sort !== null   ? i+'.@data-'+sort   : undefined,
                            filter: filter !== null ? i+'.@data-'+filter : undefined
                        };

                        _fnColumnOptions( oSettings, i );
                    }
                }
            } );
        }

The error happens because the col object is null when it calls col.mData === i. For some reason, the $(rowOne[0]).children('th, td') is providing more "i"s than there are aoColumns in oSettings. So maybe the html th and td tags are still there from the previous call to datatable, which had more columns than the next call, which is causing the error. Debugging showed me that the rowOne[0].children('th, td') still had data from the previous run.

I tried setting "destroy" to true when creating the datatable so it would (as I understand it) destroy the previous instance and start over. But that doesn't seem to be changing anything. I still get the error. Please let me know how best to handle this.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

PeterB

I figured out how to handle this. I used the code below before calling the DataTable() function:

               // if there is an existing datatable, and the column length has changed, need to destroy and empty the table
                if (resultsDataTable != null && resultsDataTable.columns.length != data.tableColumns) {
                    resultsDataTable.destroy();
                    $(tableName).empty();
                }

"resultsDataTable" was my stored output of the DataTable() method from the previous run. "data.tableColumns" was the json representation of the new set of columns I wanted to use. "tableName" was the name of the html table element where I put my DataTable.

The empty() method was the key to getting rid of the <th> elements left behind, which I believe were causing my issue.

Thank you.