CODEWITHSUNDEEP
javascripthtmljquerycssdatatables
user13853546
user13853546

Reputation:

Datatables is not displaying the data

I already include the CDN like that the website provide and still unable to show or display any result even when copy pasted every single 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' }
    ]
} );

Upvotes: 0

Views: 74

Answers (2)

Coskun Ozogul
Coskun Ozogul

Reputation: 2487

Jquery datatables.js needs jquery. You should add it before jquery.datatables.js.

 <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 you even don't need to define columns in your datatable, datatables does the work itself :



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

Upvotes: 1

prinkpan
prinkpan

Reputation: 2247

You are missing two things:

  1. JQuery library
  2. The data variable

Please check the solution 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>

Upvotes: 2

Related Questions