CODEWITHSUNDEEP
htmldatatables
RB34
RB34

Reputation: 739

can't get Bootstrap 4 Datatables example to run

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>

Upvotes: 1

Views: 4402

Answers (2)

Anand Pandey
Anand Pandey

Reputation: 2025

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

Upvotes: 0

Bhagchandani
Bhagchandani

Reputation: 558

<!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>

Upvotes: 2

Related Questions