The display of data in Datatables is malfunctioning

I have already included the provided CDN on the website but I am still unable to display any results even after copying and pasting every line of code.
Here is the CDN

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>

Here is my code

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<body>
<table id="example" class="display">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Salary</th>
        </tr>
    </thead>
</table>
</body>

Here is the script

[
    {
        "name":       "Tiger Nixon",
        "position":   "System Architect",
        "salary":     "$3,120"
    },
    {
        "name":       "Garrett Winters",
        "position":   "Director",
        "salary":     "$5,300"
    }
]
$('#example').DataTable( {
    data: data,
    columns: [
        { data: 'name' },
        { data: 'position' },
        { data: 'salary' }
    ]
} );
javascripthtmljquerycssdatatables

Answer №1

There are two essential components that you need:

  1. The JQuery library
  2. The data variable

Please review the solution provided below.

var data = [{
    "name": "Tiger Nixon",
    "position": "System Architect",
    "salary": "$3,120"
  },
  {
    "name": "Garrett Winters",
    "position": "Director",
    "salary": "$5,300"
  }
]
$('#example').DataTable({
  data: data,
  columns: [{
      data: 'name'
    },
    {
      data: 'position'
    },
    {
      data: 'salary'
    }
  ]
});
<html>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>

<body>
<table id="example" class="display">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Salary</th>
        </tr>
    </thead>
</table>
</body>
</html>

Answer №2

For Jquery datatables.js to work properly, ensure that jquery is included before jquery.datatables.js in your code.

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

And remember, you don't have to manually define columns in your datatable as datatables handles it automatically:

    <body>
       <table id="example" class="display" width="100%"></table>
    </body>

    <script>
    var dataSet = [
      [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
      [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
    ];

    $(document).ready(function() {
      $('#example').DataTable( {
         data: dataSet,
         columns: [
            { title: "Name" },
            { title: "Position" },
            { title: "Office" },
            { title: "Extn." },
            { title: "Start date" },
            { title: "Salary" }
         ]
      } );
    } );
    </script>

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

Why isn't the CSS outline property functioning properly within the handlebars?

I am working on a login form within a Handlebars page and I am trying to figure out how to set the default outline property to none for that particular element. Does anyone know how to do this? Snippet of code from the Handlebars file <input type=" ...

csshandlebars.js

When I try to execute `npm start` on Ubuntu 16.04, I encounter npm errors

My Ubuntu 16.04 OS has node v7.10.1 and npm v4.2.0 installed. I encountered an error when trying to start npm or sudo start npm. Everything was working fine this morning, but now I'm getting errors. Can someone please help me troubleshoot this? npm E ...

javascriptphpnode.jsubuntunpm

Exploring location-based services using React-Redux

Seeking a deeper comprehension of redux and the react lifecycle methods. The issue I am facing involves a prop function within the componentDidMount that calls another function in redux. Within redux, I attempt to retrieve location data to set as the init ...

javascriptreactjsreduxgeolocationreact-redux

Is there a way to execute a Python script when submitting an HTML form?

I have created an HTML form and my goal is to utilize Python to transfer the data from this form into an SQLite database file. Currently, I am attempting to achieve this using CGI. I don't require anything extravagant. Below is the code that I am work ...

pythonhtmlcgi

Navigating through different components in React is made possible with React Router

I have views in my application that depend on each other. For example, in one view a user can choose an item from a list (generated on the server), and in the next view they can perform operations on that selected item. The item is passed to the second v ...

javascriptreactjsreact-router

Exploring the functionality of Angular.js through QUnit testing

Is it possible to integrate angular.mock.inject() with QUnit instead of Jasmine? In the provided code snippet, angular.mock.dump is defined, but unfortunately angular.mock.inject remains undefined. <!DOCTYPE html> <html ng-app="mymodule"> & ...

javascriptangularjsunit-testingqunit

Is it possible to operate a jQuery mobile web application while disconnected?

Recently, I've been experimenting with the idea of creating a web application using jQuery Mobile that involves utilizing forms such as checkboxes, text fields, and combo boxes. The tasks associated with this app are quite simple, but they require dat ...

javascriptjqueryiphoneandroidjquery-mobile

Breaking down classes and cross-referencing them with a different DIV using JQuery

Trying to create a variable named relatedBoxes that will store checkboxes sharing similar classes as the box div. To do this, I am splitting up the classes and storing them in a variable called splitClass. Now, all that's left is to find out if any o ...

javascriptjqueryclassjquery-selectors

Jumping Iframe Anchor Link in Src

I'm facing a challenge with an iframe positioned in the center of a webpage. I want to show content from another page within the iframe, but not starting at the very top. To achieve this, I inserted an anchor into the src of my iframe, linked to an a ...

javascripthtmliframe

Flickity Unable to Apply CSS Styles

Seems like a straightforward problem, it reminds me of this issue discussed on Stack Overflow but in relation to Vue instead of Angular. I am facing an issue where the CSS styling I'm trying to apply to my Flickity carousel is not being rendered corre ...

htmlcssvue.jsvuejs3flickity

Locate the hyperlink within a div using JavaScript and navigate to it

I stumbled upon an element (div1) and now I am looking for a link within that element (link) so that I can navigate to it. <div class="div1"> <p> <a href="link">Link</a> </p> </div> ...

javascripthtml

Setting up a local server: A beginner's guide

Teaching myself the fundamentals of Angularjs has been a rewarding journey, but I recently encountered an obstacle in getting the 'routing' feature to work. I followed the steps of setting up a localhost using XAMPP and started Apache and MySql. ...

javascriptphpangularjs

"Proper" JSON structure for an array of data intended for populating a dropdown menu

I am currently in a "cart before the horse" situation as I do not have an actual JSON source yet, due to waiting on some access permissions. However, in the meantime, I have created a JSON structure that resembles the data I am collecting. I will eventual ...

javascriptarraysjsonjsonparser

How can you ensure your CSS code is functional across various browsers?

I have been exploring CSS and HTML for about a week now, but I am facing a challenge that has me stuck for the past thirty minutes. The issue lies in adapting this code to work smoothly across different browsers. While it aligns images in a row of four per ...

htmlcssimagecross-browser

Struggling to make a click function function properly using ajax and php

Here is the code I am working with. I have successfully queried the database and displayed the results in JSON format at the top of the page. Now, I am trying to use a click function to display them again when a button is clicked later on the page, but I ...

phpjquerymysqlajaxjson

Issues with my transpiled and typed TypeScript npm module: How can I effectively use it in a TypeScript project?

I'm trying to experiment with TypeScript. Recently, I created a simple "hello world" TypeScript module and shared it on npm. It's very basic, just has a default export: export default function hello(target: string = 'World'): void { ...

javascriptnode.jstypescriptnpmtsc

`Assemble: Store the newly created Stripe "Client Identity" in a designated container`

Upon a new user registration on my website, I aim to create a Stripe customer ID along with username and email for database storage. The process of customer creation seems to be working as evidenced by the activity in the Stripe test dashboard. However, h ...

javascriptnode.jsexpressserverstripe-payments

The Browserify/Stringify tool removes the Knockout Comment Binding functionality

As I work with Knockout and Browserify using Stringify, I am running into the issue of comments being stripped out by Stringify. These comments are important for my Knockout bindings to create a custom header within an iteration in a component. Is there a ...

javascriptknockout.jsstringify

Dealing with empty POST request bodies in Node.js Express is a common challenge

In my Node.JS project using Express framework, I am encountering an issue while trying to access the body of a POST request. The POST request is being sent through an HTML form, and upon checking with WireShark, I can see that the request is indeed getting ...

javascripthtmlnode.jsexpresspost

Unveiling the steps to display accurate progress updates using console.log

Is there a way to display real-time 'onprogress' in the console log? For instance, I would like to see each increment from 1 to 100% displayed in the console. Currently, I am only seeing one final value (such as '25') after the progres ...

jqueryajaxeventsprogressconsole.log