cannot read property style of undefined (scrollX problem)

pikaclint

i have a question when i change "Format(source)" of data and columns i get the error, cannot read property columns of undefined. But in my local computer it works just fine. Anyways my main problem is when i select the "Format(details)" i get the error "cannot read property style of undefined" and nothing displays but if I remove the scrollX property it works fine but I need scrollX since the data is long.

https://jsfiddle.net/gss4a17t/29/

jLinux

I dont think it has anything to do with scrollX, I notice you're referencing the table variable inside the DataTables initialization code (table.columns.adjust().draw();), you cant do that.

When I switch it to this.api().columns.adjust().draw();, it works fine.

The funny part is you use this.api() inside there, so im sure you know you cant use table inside the DT initialization?.. :P

pikaclint

hi jLinux thank you for your answer regarding fixing the (table.columns.adjust().draw();), I updated the jsfiddle according to your answer. I forgot to mention that I am not that familiar with jscript and datatables. Basically most of the codes are things i saw on the net and applied it. Funny thing is they work just fine on my local machine but when i applied what you said the first error was resolved.

But my main problem is still there i get this error (Uncaught TypeError: Cannot read property 'style' of undefined) when i switch my format to Detail any way to fix this? I think it has something to do with scrollX try removing scrollX and you'll see:details would displays results

jLinux

I see it now.

I switched your source from the DT min file to the DT debug file, so I could poke through the source.
Heres the related code from the jquery.dataTables.js

// Otherwise construct a single row, worst case, table with the widest
// node in the data, assign any user defined widths, then insert it into
// the DOM and allow the browser to do all the hard work of calculating
// table widths
var tmpTable = $(table).clone() // don't use cloneNode - IE8 will remove events on the main table
    .css( 'visibility', 'hidden' )
    .removeAttr( 'id' );

// Clean up the table body
tmpTable.find('tbody tr').remove();
var tr = $('<tr/>').appendTo( tmpTable.find('tbody') );

// Clone the table header and footer - we can't use the header / footer
// from the cloned table, since if scrolling is active, the table's
// real header and footer are contained in different table tags
tmpTable.find('thead, tfoot').remove();
tmpTable
    .append( $(oSettings.nTHead).clone() )
    .append( $(oSettings.nTFoot).clone() );

// Remove any assigned widths from the footer (from scrolling)
tmpTable.find('tfoot th, tfoot td').css('width', '');

// Apply custom sizing to the cloned header
headerCells = _fnGetUniqueThs( oSettings, tmpTable.find('thead')[0] );

for ( i=0 ; i<visibleColumns.length ; i++ ) {
    column = columns[ visibleColumns[i] ];

    headerCells[i].style.width = column.sWidthOrig !== null && column.sWidthOrig !== '' ?
        _fnStringToCss( column.sWidthOrig ) :
        '';
}

Line #30 seems to be where the issue is at. From what im told, the scroller requires DT to duplicate the table or something, so it seems like its having an issue with the header cells in the duplicated table.

Not that any of that helps you..

@allan to the rescue, he might be able to tell you what you're doing wrong, if anything, or atleast say if its a bug or something. (Dont PM him though, hell see the alert from me mentioning him, and answer eventually)

pikaclint

@jLinux thank you for your assistance regarding this matter you've helped solved one of my problems and i'll wait for allan's reply. Thanks man :)

jLinux

Sure thing, be patient, hes a busy guy, lol.

If its really important, you can purchase priority support, and he can knock it out very quickly

allan

$('#spr').empty();

You would need to destroy the DataTable first. You can't just empty it because DataTables doesn't know that you've done that. So you would check if it is a DataTables first, if so then destroy it and then go on to create a new one.

See destroy() and $.fn.dataTable.isDataTable().

Allan

pikaclint

hi @allan thank you for the reply, i tried to place destroy and isDatatable but i'm not sure what i'm doing wrong i follow the sample in destroy but i keep getting "cannot read property destroy of undefined".

https://jsfiddle.net/gss4a17t/57/

jLinux

In this part?

if ( ! $.fn.DataTable.isDataTable( '#spr' ) ) {
    table.destroy();
    $('#spr thead tr').remove();
    $('#spr').empty();
};

You're saying "If this is not a datatable, destroy the datatable"... :P

I think what you want is..

if ( $.fn.DataTable.isDataTable( table ) ) {
    table.destroy();
    $('#spr thead tr').remove();
    $('#spr').empty();
};

jLinux

This should work..
https://jsfiddle.net/cr78t379/1/

jLinux

And regarding the column filters you have, I would suggest trying out the YADCF plugin created by @daniel_r, im using it, and it works great!

SS of my DT + YADCF

pikaclint

@jLinux https://jsfiddle.net/cr78t379/1/

format details now displays something but it seems to be the other two formats columns. And i still get "cannot read property style of undefined".
And when I switch to other formats after that I get "cannot read property mData of undefined".

Ok I will try to incorporate the YADCF filter to what I'm doing to simplify the filtering

If you guys know a more easier way to switch data sources can you please tell me. Since I am retrieving my jsons from different .php sources thank you :)

allan

The code you used will never work since you have var table; immediately before $.fn.DataTable.isDataTable( table ) - i.e. table is always undefined.

You want to use:

if ( $.fn.DataTable.isDataTable( '#spr' ) ) {
    $('#spr').DataTable().destroy();
 };

https://jsfiddle.net/cr78t379/2/

Allan

pikaclint

@Allan i still want to ask why i keep getting "cannot read property style of undefined" when i select my format as details and that the source columns don't change at all.

Again thank you for helping fix my errors in coding, i will try to change my filtering if in case that causes the problems. I can't pinpoint what causes this error. Love using datatables for a few months i will do my best to understand it more

jLinux

for ( i=0 ; i<visibleColumns.length ; i++ ) {
                column = columns[ visibleColumns[i] ];
    
                headerCells[i].style.width = column.sWidthOrig !== null && column.sWidthOrig !== '' ?
                    _fnStringToCss( column.sWidthOrig ) :
                    '';
            }

Its the line that has .style in it, apparently that header cell doesnt have a style attribute :-D

Looks like it might just be a little sanity checking that needs to be added to the DT JS

allan

the issue comes from DataTables thinking that there are more columns in the table than there actually are - twice as many in fact. I can't remember exactly why that is - I'll have a dig around later on and see if I can jog my memory!

Allan

jLinux

Cool, is this a possible bug?

allan

Its possible - although I have a feeling not. I need to dig into it either way.

pikaclint

could i ask if there is an alternative way i could make it work? I mean emulating or making it look like the columns would change

allan

could i ask if there is an alternative way i could make it work?

Yes - https://jsfiddle.net/cr78t379/3/

Allan

pikaclint

wow @allan thank you i could not thank you enough for making this wonderful tool to make reports datatables is really awesome, i will go check the things you did to fix the errors i've encountered :)

and thank you @jLinux for introducing me to yadcf i have already put the filters to use in my project thank you very much guys :)