Style not applied

Style not applied

jvcunhajvcunha Posts: 81Questions: 10Answers: 1

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

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    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

  • jvcunhajvcunha Posts: 81Questions: 10Answers: 1
    edited September 2019

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

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    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

  • jvcunhajvcunha Posts: 81Questions: 10Answers: 1
    edited September 2019

    Hi Colin,
    header and footer not apply the class:

     Should show like this:
    

     Cheers,
    
     Jone
    
  • jvcunhajvcunha Posts: 81Questions: 10Answers: 1

    Hi Colin
        did you understand the problem?
    Best regards,

    Jone

  • allanallan Posts: 63,519Questions: 1Answers: 10,473 Site admin

    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

  • jvcunhajvcunha Posts: 81Questions: 10Answers: 1
    edited September 2019

    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

  • jvcunhajvcunha Posts: 81Questions: 10Answers: 1

    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

  • jvcunhajvcunha Posts: 81Questions: 10Answers: 1

    PS: the second image utilizing your suggestion

  • jvcunhajvcunha Posts: 81Questions: 10Answers: 1
    edited September 2019
    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);
        }
    });
    

  • allanallan Posts: 63,519Questions: 1Answers: 10,473 Site admin
    Answer ✓

    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

  • jvcunhajvcunha Posts: 81Questions: 10Answers: 1

    Thanks Allan,
    I will win a good time!
    Success

This discussion has been closed.