DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Buttons extension included on page but buttons don't appear

Buttons extension included on page but buttons don't appear

galcottgalcott Posts: 53Questions: 15Answers: 1
in Free community support

I've added the Buttons extension on my page but depending on how I initialize, either no buttons are showing up or the table itself doesn't show up. Here's the code to initialize the table:

$(document).ready( function() {
  dtHerbs = $('#tblHerbs').DataTable( {
    ajax: 'sqlprocs.asp?proc=getherbs',
    dom: '<"top"Bif>rt<"bottom"lp><"clear">',
    render: $.fn.dataTable.render.number( ',', '.', 2),
    paging: true,
    pageLength: 25,
    pagingType : 'full_numbers',
    select: {style: 'single'},
    buttons: [ 'print', 'pdf', 'copy' ],
    columnDefs: [ {
    targets: 6,
    data: null,
        width: '40px',
    defaultContent: '<image src=edit.png title="Edit" class=editherb_png>&nbsp;<image src=delete.png title="Delete" class=deleteherb_png>'
        } ]
  });

When I locate the table as shown above, by using the B within the dom option, the table itself isn't displayed except for the headers, and the rest of my JS code doesn't execute resulting in a garbled page. I tried removing the B and locating the table using this code.

dtHerbs.buttons().container()
    .appendTo( $('.col-sm-6:eq(0)', dtHerbs.table().container() ) );

In that case the page displays correctly, but there are no buttons. The debugger doesn't show any errors so I don't understand what's happening here.

This question has an accepted answers - jump to answer

Answers

  • bindridbindrid Posts: 730Questions: 0Answers: 119
    edited May 2017

    Did you include both the css and the js?

  • galcottgalcott Posts: 53Questions: 15Answers: 1

    Yes I did.

  • kthorngrenkthorngren Posts: 21,141Questions: 26Answers: 4,918

    Typically when the buttons to appear all the required JS files are not included. This page lists the required JS files needed for each button:
    https://datatables.net/download/release#Buttons

    You also need to make sure to include the two PDFMake JS for the PDF button.

    Kevin

  • galcottgalcott Posts: 53Questions: 15Answers: 1

    I added the files for print and PDF (pdfmake.min.js, vfs_fonts.js). The print button now appears but the PDF doesn't, and neither does the copy button, which doesn't appear to require any additional files.

  • bindridbindrid Posts: 730Questions: 0Answers: 119

    Can you show us all of your <script> and <link> tags?

  • galcottgalcott Posts: 53Questions: 15Answers: 1

    Here are the relevant tags, and my revised constructor.

        <link rel="stylesheet" type="text/css" href="jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.2/css/select.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="buttons.dataTables.css">
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/select/1.2.2/js/dataTables.select.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.print.min.js"></script>
    <script type="text/javascript" src="pdfmake.min.js"></script>
    <script type="text/javascript" src="vfs_fonts.js"></script>

$(document).ready( function() {
  dtHerbs = $('#tblHerbs').DataTable( {
    ajax: 'sqlprocs.asp?proc=getherbs',
    dom: '<"top"Bif>rt<"bottom"lp><"clear">',
    render: $.fn.dataTable.render.number( ',', '.', 2),
    paging: true,
    pageLength: 25,
    pagingType : 'full_numbers',
    select: {style: 'single'},

        buttons: {
      buttons: [
        { extend: 'print', text: 'Print List' },
        { extend: 'pdf', text: 'PDF' },
        { extend: 'copy', text: 'Copy to clipboard' }
      ]
    },
    columnDefs: [ {
            targets: 6,
            data: null,
      width: '40px',
            defaultContent: '<image src=edit.png title="Edit" class=editherb_png>&nbsp;<image src=delete.png title="Delete" class=deleteherb_png>'
        } ]
  });
  • kthorngrenkthorngren Posts: 21,141Questions: 26Answers: 4,918
    edited May 2017 Answer ✓

    EDIT: You also need to load either the flash or the html5 JS or both to support the type of buttons you want.

    Kevin

  • galcottgalcott Posts: 53Questions: 15Answers: 1
    edited May 2017

    Thanks, that made it work! I don't think the documentation makes this requirement clear at all.

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.