Using DataTables to insert HTML elements outside of the table structure

Question

Using DataTables to insert HTML elements outside of the table structure

I am attempting to include a button that would allow users to download the table as an .xls file. Upon researching, I stumbled upon this page, however, after implementing the provided JS code, nothing seems to occur: https://datatables.net/extensions/buttons/examples/initialisation/export.html

Below is the code I have:

$(document).ready(function() {
  $('#dataTable').DataTable({
    dom:
      "<'row' <'col-md-12'i>>" +
      "<'row' <'col-md-6'B>>" +
      "<'row' <'col-sm-12'tr>>" +
      "<'row' <'col-md-12'p>>",
    buttons: [
      'excel'
    ]
  });
});

javascript html css datatables

Answer 1

Answer №1

Make sure to include your JavaScript within the "script" tag. It may seem obvious, but it's a common mistake that I've made myself in the past.

<script>

$(document).ready(function() {
  $('#dataTable').DataTable({
    dom:
      "<'row' <'col-md-12'i>>" +
      "<'row' <'col-md-6'B>>" +
      "<'row' <'col-sm-12'tr>>" +
      "<'row' <'col-md-12'p>>",
    buttons: [
      'excel'
    ]
  });
});

</script>

Answer 2

Make sure to include your JavaScript within the "script" tag. It may seem obvious, but it's a common mistake that I've made myself in the past.

<script>

$(document).ready(function() {
  $('#dataTable').DataTable({
    dom:
      "<'row' <'col-md-12'i>>" +
      "<'row' <'col-md-6'B>>" +
      "<'row' <'col-sm-12'tr>>" +
      "<'row' <'col-md-12'p>>",
    buttons: [
      'excel'
    ]
  });
});

</script>

Using DataTables to insert HTML elements outside of the table structure

Answer №1

Similar questions

iOS app launch does not trigger Phonegap handleOpenURL

The callback function in a JavaScript setTimeout() loop does not execute properly once the loop has completed

Creating intricate mazes using canvas drawing techniques

The React.useCallback hook in Cube.js is missing a dependency, specifically 'pivotConfig'. This could potentially cause unexpected behavior in the application

Summing arrays of numbers within an HTML form input and showcasing the final result

Add a unique identifier to a table row in a jQuery/AJAX function without the need for a looping structure

How can I position the dropdown to the right-hand side of the card header in HTML?

Checking for a timeout in the node spawn process

The button must stay deactivated even if the page is refreshed

The issue of Jquery AJAX failing to parse JSON data from the PHP file

Retrieving data from a remote source repeatedly based on user selections on a single page

Struggling with formatting images to ensure consistency in size using HTML and CSS

Loading the central portion exclusively upon clicking a tag

Setting up a new event handler for an ng-repeat element

Rearranging HTML elements using jQuery

Techniques for positioning text beside an image in a floating block

Extract the <br /> tag exclusively from the content inside the div

Building a tag cloud with only HTML5 and CSS3

FIREBASE - ReferenceError: Authorization cannot be accessed until initialized

Having trouble with Express delete request body in Node.js