Having trouble with the DataTables jQuery plugin? Seeing a blank page instead of the expected results?

I've been trying to set up the Datatables jquery plugin for my HTML table but it's not working as expected. I have linked to the Datatables CDN for CSS styling and script, along with Google's hosted jQuery plugin. Additionally, I have a local JavaScript file that initializes Datatables on my table. However, when I open the HTML page, the table appears unchanged as if Datatables is not functioning at all. What could be causing this issue?

<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"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92e6f7e1e6d2e6f7e1e6bcf1fdff">[email protected]</a></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"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e195849295d3a195849295cf828e8c">[email protected]</a></td>
      <td contenteditable="true">Syslog</td>
      <td contenteditable="true">NO</td>
      <td contenteditable="true">more notes</td>
    </tr>
</tbody>

Here is the content of my local JavaScript file:

$(document).ready(function(){

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

});

If anyone has suggestions or solutions, they would be greatly appreciated.

Thank you!

Answer №1

Sorry, but there seems to be a mistake in your HTML code. I noticed an extra open ending table tag. Here is the corrected version of your HTML:

<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"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9beffee8efdbeffee8efb5f8f4f6">[email protected]</a></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"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="14607167602654607167603a777b79">[email protected]</a></td>
              <td contenteditable="true">Syslog</td>
              <td contenteditable="true">NO</td>
              <td contenteditable="true">more notes</td>
            </tr>
        </tbody>
    </table>

Answer №2

If you want to achieve your desired outcome, make sure to incorporate the following 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>

Check it out on Codepen: http://codepen.io/nagasai/pen/AXyLXO

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to establish and concentrate on a fresh component in AngularJS?

I am working on a form that has a dynamic number of inputs, which is controlled by AngularJS. <body ng-app="mainApp" ng-controller="CreatePollController" ng-init="init(3)"> <form id="createPollForm"> <input class="create-input" ...

Unusual SVG Cubic Bezier Animation Transforming Curves into Points and Lines

As a beginner in SVG CSS animation, I am currently working on morphing three curved paths into three rectangles using cubic bezier routes. While I have managed to make it work, there is an issue during the transition where parts of it skew inward in a stra ...

Having two AJAX forms on a single page can sometimes cause issues if one is already open when trying to open the other

I have a webpage where users can view and edit data from two forms, Data Part 1 and Data Part 2. Each form has an EDIT button at the top, allowing users to make changes directly on the same page. When a user clicks on the Edit button, an AJAX request is s ...

tips for building angularjs widgets with limited scope

Is there a way to generate widgets from HTML scripts on a webpage? For example: <script type="text/html" id="widget-simple"> <div class="widget-simple"> This is my widget and its name is {{ test }} </div> </script> & ...

A tutorial on preventing backbone.js from automatically adding /# when a dialog is closed

Whenever I navigate back on my backbone page, it automatically adds /# to the URL. This results in loading an empty index page from the Rails home view when pressing back again. Disabling turbolinks fixed this issue for me. However, another problem arises ...

What is the best way to assign an active class to a specific footer ID on an HTML page using AngularJS?

I tried using the activeLink directive to apply an active class to a specific id on the page, but it didn't work as expected. .directive('activeLink', ['$location', function (location) { return { restrict: 'A', ...

Setting up Jest

I'm currently attempting to integrate the Jest Testing framework into my React Native project. Unfortunately, I am encountering an error message: Failed to retrieve mock metadata: /Users/me/Documents/Development/project/node_modules/global/window.js ...

Webpage refreshing when resizing browser

Hey there, I'm facing an issue where my HTML website restarts whenever the browser size changes. Can someone please help me fix this? You can check out my website here I have uploaded my code files here: Code Files Link ...

Protractor unable to locate elements using by.repeater

What is the best method for targeting this repeater with Protractor? <a ng-repeat="item in filteredItems = (items | filter:'abc')">{{item}}</a> ...

What is the reason this straightforward regex functions perfectly in all cases, except for when applied to the html5

This particular HTML input turns red to signify that the pattern has not matched when the value in the input field is "1". var newInput = document.createElement ('input'); newInput.pattern = '^\d+\.?\d*$'; document.getEl ...

How can I modify the color of a jQuery Mobile Select menu?

Is there a way to dynamically modify the color (background and text) of a single select menu in jQuery Mobile, without impacting other elements with the same class? I've experimented with various approaches, such as: $('#select').css({color ...

Thymeleaf causing Spring IO POST form to redirect to incorrect URL

One of the challenges I'm facing while coding a website is with a form for uploading files. Ideally, when accessing the URL http://localhost:8080/uploadRevision/{docId}, it should lead to http://localhost:8080/uploadRevisionLanding and then redirect b ...

What could be causing the issue with dayjs dynamic importing in TypeScript?

Currently, I am developing a web screen within a .NET application and facing an issue with sending datetime preferences from the system to the web screen using CefSharp settings. AcceptLanguageList = CultureInfo.CurrentUICulture.Name In my TypeScript code ...

How can you insert text onto a page with restricted space?

As I work on my web page, I find myself restricted by a character limit of 10,000. This limitation is proving to be quite challenging for me. The tabs on the page I am editing are divided with div ID, and all my writing already takes up 80% of the charact ...

Tips for hiding the initial value in an HTML Select tag

My HTML Select Program is very basic. By default, it displays "Volvo" as the first value. Is there a way to not display any initial value and allow the user to make a selection? <!DOCTYPE html> <html> <body> <form action="demo_form ...

Learn the process of utilizing signed URLs in conjunction with ReactJS to securely store files in AWS

I am currently working on a form where I need to attach images along with regular text inputs in order to submit data to my MongoDB. Here is the code for my post creation function: const [postData, setPostData] = useState({ text: '', i ...

Difficulty encountered in setting the background image to cover the entire screen

I'm facing difficulties while creating a parallax website. Specifically, I'm having troubles with CSS. Here's the HTML code: <div id="skrollr-body"> <div class="subnav"> <ul id="nav"> ...

Is there a way to use a POST request and Mongoose in Express to add a new object?

I am struggling to figure out how to use .Router() for creating a POST request route. I have only worked with getById before. Can someone help me create a route for POST requests? ./generalRepository.js function Repository() {} Repository.prototype.getB ...

Navigating through a complex JavaScript project and feeling a bit disoriented

I recently joined a JavaScript project that was being worked on by a single programmer for the past 6 months. However, this programmer left without providing much explanation. The project is built using Ionic, which I have discovered is primarily used for ...

What is the best way to eliminate leading and trailing spaces from a text input?

I'm currently working on troubleshooting a bug in an AngularJS application that involves multiple forms for submitting data. One of the issues I encountered is that every text box in the forms is allowing and saving leading and trailing white spaces ...