Customizing button for data table

JavaScript
,
1

I want to use customize button to save my table to PDF and also hide the ‘PDF’ word which comes as default to save the pdf on top of data table. i want to use only the customized button

but my below code is not working.

   $(document).ready(function () {
  var table = $('#example').DataTable({
    "bLengthChange": false,
    "bFilter": false,
    "bInfo": false,
    "pagingType": "simple",
    "lengthMenu": [15, 25, 50, -1],
    "paging": true,
    "paging.numbers": true,
    "ordering": false,
    dom: 'Bfrtip',
  buttons: ['pdfHtml5']
    });
    table.button( '.buttons-pdfHtml5' ).css('display', 'none');
     $("#btn").on("click", function() {
    table.button( '.buttons-pdfHtml5' ).trigger();
});
});

<button type="button" id="btn">save pdf</button>
3

Could this be a timing issue? If you’re trying to target the PDF button before it’s fully initialized and inserted into the DOM by DataTables, things might go awry.

Instead of using .css('display', 'none') try using the DataTables API to hide the button after it’s initialized:

Something like this should work (untested):

$(document).ready(function () {
  var table = $('#example').DataTable({
    bLengthChange: false,
    bFilter: false,
    bInfo: false,
    pagingType: "simple",
    lengthMenu: [15, 25, 50, -1],
    paging: true,
    ordering: false,
    dom: 'Bfrtip',
    buttons: ['pdfHtml5']
  });

  // Hide the default PDF button using the DataTables API
  table.buttons('.buttons-pdf').container().hide();

  // Trigger the PDF export using your custom button
  $('#btn').on('click', function () {
    table.button('.buttons-pdf').trigger();
  });
});

<button type="button" id="btn">Save PDF</button>
1 Like
4

thanks @James_Hibbard