Style not applied

jvcunha

Hi,
Style does not fill all classes (see image):

CSS and JS order:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/dataTables.jqueryui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.jqueryui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.4/css/fixedHeader.jqueryui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/scroller/2.0.0/css/scroller.jqueryui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.0/css/select.jqueryui.min.css"/>
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/dataTables.jqueryui.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.jqueryui.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.4/js/dataTables.fixedHeader.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/scroller/2.0.0/js/dataTables.scroller.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script>

Best regards

colin

Hi @jvcunha ,

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

jvcunha

Hi Colin,
thanks for speed answer.
Link: http://live.datatables.net/niyuxiji/1/edit

colin

Hi @jvcunha ,

Thanks for the link, please could you tell me what I'm looking for though - it all looks as expected to me. If you could provide step by step instructions, that would be helpful,

Cheers,

Colin

jvcunha

Hi Colin,
header and footer not apply the class:

 Should show like this:

 Cheers,

 Jone

jvcunha

Hi Colin
    did you understand the problem?
Best regards,

Jone

allan

Hi Jone,

Thanks for the test case. It looks like I might have removed the replacement of H and F in the dom property, which I shouldn't have done yet, but I can't see where they are defined anywhere! I think you are the first to notice this (or at least the first to report it) in the 1.10.x series!

As a workaround for the moment I would suggest initialising your table like this example.

Allan

jvcunha

Hi Allan,
Thanks for the temporary solution.
      I will have to change several pages where I use datatables, which will take a long time ...
      Do you have any prediction of correction?
      Best Regards

jvcunha

Allan,
    Congratulations on the excellent component.
    All datatables I use today have this image header. In 'dt.draw' and 'scrollstop' events I show and hide the 'To top' button. You would have to change this on every page using your solution.
    Greetings,
   
    Jone

jvcunha

PS: the second image utilizing your suggestion

jvcunha

function hackDT(dt) {
    if ($('#' + dt[0].id + '_wrapper').find('.dataTables_scroll').prev()[0].className === '') {
        $('#' + dt[0].id + '_wrapper').find('.dataTables_scroll').prev().addClass('fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-tl ui-corner-tr');
        $('#' + dt[0].id + '_wrapper').find('.dataTables_scroll').next().addClass('fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-tl ui-corner-tr');
    }
}

var table = $('#myTable').DataTable({
    initComplete: function () {
        hackDT(this);
    }
});

allan

Clever hack :-). You could also do it globally:

$('body').on('init.dt', function (settings) {
  hackDT(settings.nTable.id);
} );

That would save you updating every page. You woul dhave to make a small update to the hackDT function to take a string rather than an element though.

Allan

jvcunha

Thanks Allan,
I will win a good time!
Success