fnVisibleToColumnIndex returns null

rf1234

I have a problem with the code below from jquery.dataTables.js, version 1.11.5.

_fnVisibleToColumnIndex returns null and the subsequent line that expects "idx" to contain an integer crashes. I have absolutely no idea what could have caused this. Any hints?

idx = _fnVisibleToColumnIndex( settings, i );
el.style.width = settings.aoColumns[idx].sWidth;

    /**
     * Convert the index of a visible column to the index in the data array (take account
     * of hidden columns)
     *  @param {object} oSettings dataTables settings object
     *  @param {int} iMatch Visible column index to lookup
     *  @returns {int} i the data index
     *  @memberof DataTable#oApi
     */
    function _fnVisibleToColumnIndex( oSettings, iMatch )
    {
        var aiVis = _fnGetColumns( oSettings, 'bVisible' );

        return typeof aiVis[iMatch] === 'number' ?
            aiVis[iMatch] :
            null;
    }
    /**
     * Update the header, footer and body tables for resizing - i.e. column
     * alignment.
     *
     * Welcome to the most horrible function DataTables. The process that this
     * function follows is basically:
     *   1. Re-create the table inside the scrolling div
     *   2. Take live measurements from the DOM
     *   3. Apply the measurements to align the columns
     *   4. Clean up
     *
     *  @param {object} settings dataTables settings object
     *  @memberof DataTable#oApi
     */
    function _fnScrollDraw ( settings )
    {
        // Given that this is such a monster function, a lot of variables are use
        // to try and keep the minimised size as small as possible
        var
            scroll         = settings.oScroll,
            scrollX        = scroll.sX,
            scrollXInner   = scroll.sXInner,
            scrollY        = scroll.sY,
            barWidth       = scroll.iBarWidth,
            divHeader      = $(settings.nScrollHead),
            divHeaderStyle = divHeader[0].style,
            divHeaderInner = divHeader.children('div'),
            divHeaderInnerStyle = divHeaderInner[0].style,
            divHeaderTable = divHeaderInner.children('table'),
            divBodyEl      = settings.nScrollBody,
            divBody        = $(divBodyEl),
            divBodyStyle   = divBodyEl.style,
            divFooter      = $(settings.nScrollFoot),
            divFooterInner = divFooter.children('div'),
            divFooterTable = divFooterInner.children('table'),
            header         = $(settings.nTHead),
            table          = $(settings.nTable),
            tableEl        = table[0],
            tableStyle     = tableEl.style,
            footer         = settings.nTFoot ? $(settings.nTFoot) : null,
            browser        = settings.oBrowser,
            ie67           = browser.bScrollOversize,
            dtHeaderCells  = _pluck( settings.aoColumns, 'nTh' ),
            headerTrgEls, footerTrgEls,
            headerSrcEls, footerSrcEls,
            headerCopy, footerCopy,
            headerWidths=[], footerWidths=[],
            headerContent=[], footerContent=[],
            idx, correction, sanityWidth,
            zeroOut = function(nSizer) {
                var style = nSizer.style;
                style.paddingTop = "0";
                style.paddingBottom = "0";
                style.borderTopWidth = "0";
                style.borderBottomWidth = "0";
                style.height = 0;
            };

        // If the scrollbar visibility has changed from the last draw, we need to
        // adjust the column sizes as the table width will have changed to account
        // for the scrollbar
        var scrollBarVis = divBodyEl.scrollHeight > divBodyEl.clientHeight;

        if ( settings.scrollBarVis !== scrollBarVis && settings.scrollBarVis !== undefined ) {
            settings.scrollBarVis = scrollBarVis;
            _fnAdjustColumnSizing( settings );
            return; // adjust column sizing will call this function again
        }
        else {
            settings.scrollBarVis = scrollBarVis;
        }

        /*
         * 1. Re-create the table inside the scrolling div
         */

        // Remove the old minimised thead and tfoot elements in the inner table
        table.children('thead, tfoot').remove();

        if ( footer ) {
            footerCopy = footer.clone().prependTo( table );
            footerTrgEls = footer.find('tr'); // the original tfoot is in its own table and must be sized
            footerSrcEls = footerCopy.find('tr');
        }

        // Clone the current header and footer elements and then place it into the inner table
        headerCopy = header.clone().prependTo( table );
        headerTrgEls = header.find('tr'); // original header is in its own table
        headerSrcEls = headerCopy.find('tr');
        headerCopy.find('th, td').removeAttr('tabindex');


        /*
         * 2. Take live measurements from the DOM - do not alter the DOM itself!
         */

        // Remove old sizing and apply the calculated column widths
        // Get the unique column headers in the newly created (cloned) header. We want to apply the
        // calculated sizes to this header
        if ( ! scrollX )
        {
            divBodyStyle.width = '100%';
            divHeader[0].style.width = '100%';
        }

        $.each( _fnGetUniqueThs( settings, headerCopy ), function ( i, el ) {
            idx = _fnVisibleToColumnIndex( settings, i );
            el.style.width = settings.aoColumns[idx].sWidth;
        } );

rf1234

I was about to write "there is something invisible in my HTML that must have caused it". Then did another compare of my files and found the error in my HTML: I had one line twice. Those tables are getting too large

Everything works ok now! No help needed.