Receiving a TypeError when trying to run or initiate dataTables.js

user_2500177 0
Viewed 188

I'm trying to run or initiate script using a plugin called dataTables.js. I've managed to import the library using ES6 import statement along with the jquery dependency. When I tried to run or initiate the plugin I get an error as shown below

jQuery.Deferred exception: (0 , _jquery.default)(...).DataTable is not a function TypeError: (0 , _jquery.default)(...).DataTable is not a function
    at HTMLDocument.eval (https://juwto.csb.app/src/index.js:13:37)
    at j (https://juwto.csb.app/src/jquery.js:1977:29)
    at k (https://juwto.csb.app/src/jquery.js:1983:19)

Sandbox Link - https://codesandbox.io/s/gracious-chaplygin-juwto?file=/index.html

enter image description here

I can't seem to find a proper solution or answer even though I managed to import the libraries properly

import $ from "./jquery";
import _dt from "./datatables";

$(document).ready(function() {
  $("#table").DataTable({
    paging: false,
    bFilter: false,
    bInfo: false
  });
});
ecmascript-6 datatables javascript
2 Answers

Assuming the path is correct, try to import DataTables like this: import "./datatables.net";

user_80341230

Well you have a few errors, the first one is what S. Esteves say, your import should be like this

import "./datatables";

The second one is what dani says, I mean that you used a wrong id.

$("#table_id").DataTable({
    paging: false,
    bFilter: false,
    bInfo: false
 });

And the last one is that jquery is beign loaded after DataTable. I think that unfortunately the datatable.js cannot be loaded conditionally or on-the-fly, so I suggest you to add the scripts in the head of your index.html file. You also need to load the css and don't forget that jquery needs to be first.

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script
      type="text/javascript"
      src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"
    ></script>
  </head>
  <body>
    <div class="button">button</div>

    <table id="table_id" class="display">
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>A</td>
          <td>192.168.254.120</td>
        </tr>

        <tr>
          <td>D</td>
          <td>192.168.254.121</td>
        </tr>

        <tr>
          <td>C</td>
          <td>192.168.254.122</td>
        </tr>

        <tr>
          <td>B</td>
          <td>192.168.254.123</td>
        </tr>
      </tbody>
    </table>

    <script>
      $(document).ready(function() {
        $("#table_id").DataTable();
      });
    </script>
  </body>
</html>

Either way I will try to think of a solution for imports, I will come back here if I get something, I hope I have helped you!

user_94399800
Related