1

I'm trying to run the example from https://datatables.net/examples/styling/bootstrap4.html

My code looks like this

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#maintable').DataTable();
});

But I keep getting an error in the browser console... the function DataTable is not defined... What am I missing?

Alex R
  • 11,364
  • 15
  • 100
  • 180

1 Answers1

3

You run two jQuery versions and two bootstrap versions.

The jQuery 3.2.1 slim and the 1.12.4.

I suggest you to try this in the <head>:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/dataTables.bootstrap4.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.1/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>

And this script:

<script type="text/javascript">
$(document).ready(function() {
    $('#maintable').DataTable();
});

Note: The jQuery link above is not the "slim" version... The slim version exclusions are listed here. Unless you are certain you don't need Ajax and the jQuery animation effects, I suggest you use to use full version.

Note from the question's poster (see edits): The last thing I fixed myself to make it work was to add <THEAD> and <TBODY> (it's not sufficient to have a table structure with just <tr> and <td>).

<table>
  <thead>
    <!-- some <th>... -->
  </thead>
  <tbody>
  </tbody>
</table>

Here is a 2013 example of a «basic HTML markup structure» for a <table> without data.

If you take a minute to read the comments below, you may discover some additional valid markup.
;)

And here is the official documentation.

Louys Patrice Bessette
  • 33,375
  • 6
  • 36
  • 64