can't get Bootstrap 4 Datatables example to run

Question

I am attempting to get the example (the second code snippet in the answer in this thread Bootstrap - How to sort table columns) to run. Shouldn't I just be able to put the js snippet in a script tag in the html or am I totally misunderstanding how it works? I've also tried some of the examples from https://datatables.net/ as well but none of the sortable functionality shows up. Any help would be greatly appreciated.

edit: added code below and now working

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

</head>
<body>
<div class="container">
  <h1>Bootstrap 4 DataTables</h1>
  <table id="example" class="table table-striped table-inverse table-bordered table-hover" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/js/dataTables.bootstrap4.min.js"></script>
<script> type="text/javascript"
  $(document).ready(function() {
    $('#example').DataTable();
  });
</script>

I run the example without any problems! Can you show us your code? what have you done so far? any errors if there is?(in the console of your browser) — moay, Aug 10 '17 at 04:59
I changed where my script tag was in the code and now it works. What are the rules as to where the script tag needs to be? I was reading somewhere else that autorunning js needs to go after the body? — RB34, Aug 10 '17 at 06:07
It's good practice to put your JS code at the end of the file. But the real problem is that some libraries use some dependencies like how dataTable used jQuery in that case you must import jQuery before dataTable and when you want to use `dataTable()` function you must import the library before you can use it. (sorry for my English, it is not my mother language) — moay, Aug 10 '17 at 06:14

Bhagchandani · Answer 1 · 2017-08-10T06:09:38.613

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <meta http-equiv = "X-UA-Compatible" content = "IE = edge,chrome = 1">
      <title>Hello World using Backbone.js</title>
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
      <link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>
   </head>

   <body>
      <div class="container"> <h1>Bootstrap 4 DataTables</h1> <table id="example" class="table table-striped table-inverse table-bordered table-hover" cellspacing="0" width="100%"> 
      <thead> 
        <tr> 
          <th>Name</th> 
          <th>Position</th> 
          <th>Office</th> 
          <th>Age</th> 
          <th>Start date</th> 
          <th>Salary</th> 
        </tr>
      </thead> 
        <tfoot> 
          <tr> 
            <th>Name</th> 
            <th>Position</th> 
            <th>Office</th> 
            <th>Age</th> 
            <th>Start date</th> 
            <th>Salary</th> 
          </tr>
        </tfoot> 
        <tbody> 
          <tr> 
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
          </tr>
          <tr> 
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
          </tr>
          <tr> 
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
          </tr>
        </tbody> 
        </table>
      </div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/js/dataTables.bootstrap4.min.js"></script>
      <script type="text/javascript">
        $(document).ready(function() {
  $('#example').DataTable();
});
      </script>
   </body>
</html>

score 0 · Answer 2 · answered Aug 11 '17 at 06:11

0

Why you are not using datatable api for sorting. It is the simplest way to sorting on one or multiple column.

You can see the link here for how to implement in the example.

https://datatables.net/examples/basic_init/multi_col_sort.html

answered Aug 11 '17 at 06:11

Anand Pandey

2,025
3
20
39

can't get Bootstrap 4 Datatables example to run

2 Answers2