Buttons not showing

Buttons not showing

kencoleaukencoleau Posts: 17Questions: 5Answers: 0

I have included all the css and js files as shown in the download builder, they all appear to be loading, no errors in the Chrome developers console, yet I am not getting any buttons to display. I also have a fixed header which is working.

<link rel="stylesheet" type="text/css" href="DataTables-1.10.12/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="Buttons-1.2.2/css/buttons.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="FixedHeader-3.1.2/css/fixedHeader.dataTables.min.css"/>

<script type="text/javascript" src="jQuery-2.2.3/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="JSZip-2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="pdfmake-0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript" src="pdfmake-0.1.18/build/vfs_fonts.js"></script>
<script type="text/javascript" src="DataTables-1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="Buttons-1.2.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="Buttons-1.2.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="Buttons-1.2.2/js/buttons.print.min.js"></script>
<script type="text/javascript" src="FixedHeader-3.1.2/js/dataTables.fixedHeader.min.js"></script>
<script>
$(document).ready(function(){
    $('#table_id').DataTable({
        fixedHeader: true,
        buttons: [ 'copy', 'excel', 'pdf' ]
    });
});
</script>

any thoughts where I may be going wrong?

Thanks

Ken

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 63,761Questions: 1Answers: 10,510 Site admin
    Answer ✓

    You need to include the dom option like in the Buttons examples. That tells DataTables where to put the buttons on the page.

    Allan

  • kencoleaukencoleau Posts: 17Questions: 5Answers: 0

    Thanks, when I read the docs that seemed optional.

    I will add it in and see how I go.

  • kencoleaukencoleau Posts: 17Questions: 5Answers: 0

    That has worked.

    I understand what the l, f, t, i and p elements are, what is the r element?

    I added B last, dom: 'lftiprB', but the buttons ended hard up against the i element. If I made the window smaller they eventually ended up under the pagination controls. What did I do wrong?

    The copy and excel buttons worked, the PDF button hung the page. Is there any limit on the size of the data with PDF?

    thanks

    Ken

  • allanallan Posts: 63,761Questions: 1Answers: 10,510 Site admin
    Answer ✓

    Thanks, when I read the docs that seemed optional.

    The dom parameter is optional, but since Buttons isn't included in the default list of options you need to tell it where to insert the buttons if you do want them. The other option is to use the API to insert the element using Javascript.

    If I made the window smaller they eventually ended up under the pagination controls. What did I do wrong?

    Without a test case it is hard to say what is happening, but likely the CSS is causing this. In most of the examples the Buttons are shown first, rather than last, and the default CSS reflects that. You would need to modify the default CSS if you want to change that.

    Is there any limit on the size of the data with PDF?

    There isn't a hard limit, but we have found in the past that the PDF processor that is being used (pdfmake) is really slow for large tables.

    Allan

This discussion has been closed.