I can’t install and start working with datatables via NPM ((

I can’t install and start working with datatables via NPM ((

John DowJohn Dow Posts: 16Questions: 6Answers: 0

Hello, I really need your help (

My package.json

{
  "name": "js-sourse",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "datatables.net-dt": "^1.13.6"
  }
}

My app.js

import DataTable from 'datatables.net-dt';

const dataSet = [
  ['Tiger Nixon', 'System Architect', 'Edinburgh', '5421', '2011/04/25', '$320,800'],
  ['Garrett Winters', 'Accountant', 'Tokyo', '8422', '2011/07/25', '$170,750'],
  ['Ashton Cox', 'Junior Technical Author', 'San Francisco', '1562', '2009/01/12', '$86,000'],
  ['Cedric Kelly', 'Senior Javascript Developer', 'Edinburgh', '6224', '2012/03/29', '$433,060'],
]

let table = new DataTable('#example', {
  columns: [
    {title: 'Name'},
    {title: 'Position'},
    {title: 'Office'},
    {title: 'Extn.'},
    {title: 'Start date'},
    {title: 'Salary'}
    ],
    data: dataSet,
})

My index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="app.js"></script>
    <title>Document</title>
  </head>
  <body>
    <table id="example" class="display" width="100%"></table>
    <thead></thead>
    <tbody></tbody>
  </body>
</html>

I'm getting an error in the browser JS console: SyntaxError: Unexpected identifier 'DataTable'. import call expects one or two arguments.

Where is my problem?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 62,235Questions: 1Answers: 10,209 Site admin

    Are you using ESBuild, Vite, Rollup or something like that to turn your JS file into something that browser can use?

    Allan

  • John DowJohn Dow Posts: 16Questions: 6Answers: 0
    edited September 2023

    Hi Allan! I use VSCode w Live Http Server. A simple example with data on an http page with connected CDNs in the <head> section works great, but I want use NPM (NodeJS)
    Work example - index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" />
        <link rel="stylesheet" href="/_css/style.css" />
        <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
        <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
        <script src="app.js"></script>
        <title>Document</title>
      </head>
      <body>
        <div class="container">
          <table id="myTable" class="table table-hover table-striped table-bordered table-sm table" style="width: 100%">
            <thead class="table-info">
              <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011-04-25</td>
                <td>$320,800</td>
              </tr>
            </tbody>
            <tfoot class="table-info">
              <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
              </tr>
            </tfoot>
          </table>
        </div>
      </body>
    </html>
    

    Work example - app.js

    $(document).ready(function () {
      $('#myTable').DataTable({
        stateSave: true, //default - false
        lengthMenu: [
          [10, 25, 50, -1],
          [10, 25, 50, 'All'],
        ],
        language: {
          url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/ru.json',
          searchPlaceholder: 'Строка поиска',
          zeroRecords: 'No records to display',
        },
        pageLength: 25,
        pagingType: 'full_numbers',
      })
    })
    

    style.css

    :root {
      --hover-my-color: lightcyan;
    }
    
    .container {
      padding-top: 3em;
      padding-bottom: 3em;
    }
    
    
    .table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
      background-color: var(--hover-my-color);
    }
    
  • John DowJohn Dow Posts: 16Questions: 6Answers: 0
    edited October 2023

    Why doesn't what is written in the NPM Installation section work? Why write something at 50%? Why doesn't it (import DataTable from 'datatables.net-dt') just work at the very beginning?

  • allanallan Posts: 62,235Questions: 1Answers: 10,209 Site admin
    Answer ✓

    You need to use a bundler of some kind. Vite is a popular one at the moment, as is ESBuild, and Rollup (Vite uses Rollup). In the npm documentation for installation of DataTables I've assumed that the developer using it is already familiar with bundling libraries installed from npm (since that is at the more general application development level, in a similar way to how I haven't documented Javascript's syntax). I can see how that could be confusing for someone new to bundling libraries though, and my apologies. I will look at how I can improve that without actually redocumenting the various bundlers!

    I've put together this little example on Stackblitz which shows Vite being used with DataTables (the code copied from the manual page as is).

    Apologies if I'm trying to teach my granny to suck eggs, but going back to your first post, import DataTable from 'datatables.net-dt'; needs to get resolved into software that the browser can use. For that you need to use something like Vite or Rollup.

    Yup, modern Javascript can be a huge PITA! The "old" way of just including the DataTables <script> works so much easier, but there are advantages to using bundlers and it is worth battling through.

    If you come across something that I can do better with the npm packages to make the installation easier, let me know. As I say, I had assumed that devs using it would already have knowledge of using a bundler since that is a key concept for using npm packages on the client-side. That was an incorrect assuption...

    Allan

Sign In or Register to comment.