DataTables jquery plugin not working, get a blank page?

Question

I am trying to implement the Datatables jquery plugin on with my html table but having no luck. I'm linking to the Datatables CDN for both the CSS styling and Datatables script itself, while linking to Google's hosted jquery plugin. I also have a local Javascript file with the script to initialize data tables on my table. I go to open the html page and just get my plain table as if DataTable isn't even functioning. What could I be doing wrong?

<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="datatables.js"></script>

<table id="mytable">
<table>
  <thead>
    <tr>
      <th>High-Level Category</th>
      <th>Device Type</th>
      <th>Hostname</th>
      <th>IP Address</th>
      <th>Owner</th>
      <th>Organizational Unit</th>
      <th>Organizational Unit Email</th>
      <th>Universal Forwarder or Syslog?</th>
      <th>In PCI?</th>
      <th>Notes</th>
    </tr>
  </thead>
<tbody contenteditable>
    <tr>
      <td contenteditable="true">SECDEV1</td>
      <td contenteditable="true">Firewall</td>
      <td contenteditable="true">Description 1</td>
      <td contenteditable="true">1.1.1.1</td>
      <td contenteditable="true">Kim</td>
      <td contenteditable="true">Information Technology</td>
      <td contenteditable="true">test@test.com</td>
      <td contenteditable="true">Syslog</td>
      <td contenteditable="true">Yes</td>
      <td contenteditable="true">notes</td>
    </tr>
    <tr>
      <td contenteditable="true">SECDEV2</td>
      <td contenteditable="true">Switch</td>
      <td contenteditable="true">description2</td>
      <td contenteditable="true">2.2.2.2</td>
      <td contenteditable="true">Bob</td>
      <td contenteditable="true">Information Networking</td>
      <td contenteditable="true">test2@test.com</td>
      <td contenteditable="true">Syslog</td>
      <td contenteditable="true">NO</td>
      <td contenteditable="true">more notes</td>
    </tr>
</tbody>

The local js file I have is as follows:

$(document).ready(function(){

    $('#mytable').dataTable();

});

Any help would be great.

Thanks!

Answer 1

To achieve your expected result, use below CDN libraries

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>

Codepen- http://codepen.io/nagasai/pen/AXyLXO

Answer 2

Your html code is incorrect. There was an extra open ending table tag. I corrected your html below:

<table id="mytable">
      <thead>
        <tr>
          <th>High-Level Category</th>
          <th>Device Type</th>
          <th>Hostname</th>
          <th>IP Address</th>
          <th>Owner</th>
          <th>Organizational Unit</th>
          <th>Organizational Unit Email</th>
          <th>Universal Forwarder or Syslog?</th>
          <th>In PCI?</th>
          <th>Notes</th>
        </tr>
      </thead>
        <tbody contenteditable>
            <tr>
              <td contenteditable="true">SECDEV1</td>
              <td contenteditable="true">Firewall</td>
              <td contenteditable="true">Description 1</td>
              <td contenteditable="true">1.1.1.1</td>
              <td contenteditable="true">Kim</td>
              <td contenteditable="true">Information Technology</td>
              <td contenteditable="true">test@test.com</td>
              <td contenteditable="true">Syslog</td>
              <td contenteditable="true">Yes</td>
              <td contenteditable="true">notes</td>
            </tr>
            <tr>
              <td contenteditable="true">SECDEV2</td>
              <td contenteditable="true">Switch</td>
              <td contenteditable="true">description2</td>
              <td contenteditable="true">2.2.2.2</td>
              <td contenteditable="true">Bob</td>
              <td contenteditable="true">Information Networking</td>
              <td contenteditable="true">test2@test.com</td>
              <td contenteditable="true">Syslog</td>
              <td contenteditable="true">NO</td>
              <td contenteditable="true">more notes</td>
            </tr>
        </tbody>
    </table>