javascript - Add DataTable with sort in html doc

Question

I would like to create an simple table in html doc. The table exists but I cant order and operate with the table. I'm a noob in html and js. My result:

<link rel="stylesheet" type="text/css" href="static/datatables.min.css"/>
<script type="text/javascript" src="static/datatables.min.js"></script>
<table id="example" class="display">
<thead>
  <tr><th>Person</th><th>Monthly pay</th></tr>
</thead>
<tbody>
  <tr><td>Jan Molby</td><td>12</td></tr>
  <tr><td>Steve Nicol</td><td>8</td></tr>
  <tr><td>Steve McMahon</td><td>9</td></tr>
  <tr><td>John Barnes</td><td>15</td></tr>
</tbody>
<tfoot>
  <tr><td>TOTAL</td><td>￡45,000</td></tr>
</tfoot>
</table>
<script type="text/javascript">
  $(document).ready(function() {
      $('#example').dataTable();
  } );
</script>

question from:https://stackoverflow.com/questions/65931679/add-datatable-with-sort-in-html-doc

Answer 1

It seems you are missing few things.

Like correct path to your CSS and JavaScript for your DataTable

You can use directly the CDN for DataTable, also don't forget to add the CDN for jQuery.

You can get the DataTable CDN from here DataTable CDN Link

Check below the sample code.

$(document).ready(function() {
  $('#example').dataTable();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<table id="example" class="display">
  <thead>
    <tr>
      <th>Person</th>
      <th>Monthly pay</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jan Molby</td>
      <td>12</td>
    </tr>
    <tr>
      <td>Steve Nicol</td>
      <td>8</td>
    </tr>
    <tr>
      <td>Steve McMahon</td>
      <td>9</td>
    </tr>
    <tr>
      <td>John Barnes</td>
      <td>15</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>TOTAL</td>
      <td>￡45,000</td>
    </tr>
  </tfoot>
</table>