ScrollY or scrollX option : double elements issue

toniux79

Hello,

First, thank you for this great work !

I have a problem when I create a datable with a scrollX or scrollY option, the datatable seems to be created twice or 3 times ! Even though just one datatable is visible..

Here is a test link :
http://live.datatables.net/gelaboso/1/edit?html,js,console,output

Thank you for your help.
Anthony

kthorngren

Does the last post of this thread from Allan help to answer your question?
https://datatables.net//forums/discussion/comment/112343/#Comment_112343

Seems like it also copies the classes to the "component parts" built for the header, body and footer.

Kevin

toniux79

Thank you very much Kevin. I understand that the reason of this "problem" is already known.

However, I don't know how I can have a correct behaviour (the correct number of elements) with the "getElementsByClassName" function when the scrolling is enabled ?

It returns a different number of elements when the scrolling is enabled or not..

Anthony

allan

I don't know how I can have a correct behaviour (the correct number of elements) with the "getElementsByClassName" function when the scrolling is enabled ?

What you are seeing is technically the correct behaviour - there are three individual table elements when scrolling is enabled! It might be correct, but I can obvious see how it isn't desired.

What is it you are actually attempting to do? If you want to get the table element for the DataTable use table().node().

Allan

toniux79

Allan,
Thank you for your answer.

I am attempting to clear all the search fields on the current visible table (I have bootstrap multi tabs with a datatable on each tab), that I have added on foot of each column.

I also use the following function to reset the search, that works perfectly but it doesn't clear the search fields that I added on datatable foot :
$.fn.dataTable
.tables( {visible: true, api: true} )
.search( '' )
.columns().search( '' )
.draw();

That is why i was trying to get these search fields elements via the getElementsByClassName function :
var elements = document.getElementsByClassName('searchFields');

Sorry but I don't understand how I should use the table().node() function to replace mine ?

Anthony

allan

var elements = document.getElementsByClassName('searchFields');

That actually should work. It won't work if you have an id selector in there.

However, I'd suggest you simplify it:

$( 'input', table.columns().header() ).val( '' );

Assuming your input element can be selected by 'input'.

Allan

toniux79

Thank you Alan, it works !

Here is my code

    // Get the visible table and clear search field
    $.fn.dataTable.tables( {visible: true, api: true} )
        .search( '' )
        .columns().search( '' )
        .draw();

    // Clear my search fields on footer 
    var CurrentTable = $.fn.dataTable.tables( {visible: true, api: true} );
    $( 'input', CurrentTable.columns().footer() ).val( '' );

Regards,
Anthony