Answers

• colin Posts: 15,142Questions: 1Answers: 2,586

  April 2018

  Hi @theurtin ,

  I'm guessing the error is coming from the DataTables initialisation line? I suspect the error is the selector you're using. If the table has an ID of 'table', then line 5 should be:

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

  Cheers,

  Colin
• theurtin Posts: 4Questions: 1Answers: 0

  April 2018

  Hi !

  No the error come from the line 2 :

  var dt = require( 'datatables.net' )( window, $ );
  
• colin Posts: 15,142Questions: 1Answers: 2,586

  April 2018

  Hi @theurtin ,

  This page here suggests the line should be:

  require( 'datatables.net-bs4' )( $ );

  Cheers,

  Colin
• theurtin Posts: 4Questions: 1Answers: 0

  April 2018 edited April 2018

  Thanks for helping me but now i get this error :

  Cannot read property 'defaults' of undefined at dataTables.bootstrap4.js:47
  
• allan Posts: 61,665Questions: 1Answers: 10,096 Site admin

  April 2018

  Sorry - it should be (window, $) or simply () with no parameters. The documentation on the npm package page is wrong I'm afraid.

  Are you using an AMD loader or CommonJS?

  Allan
• theurtin Posts: 4Questions: 1Answers: 0

  April 2018

  It seem to be an AMD loader but i used Webpack Encore so i'm not sure.

  I try :

  var $ = require( 'jquery' );
  var dt = require( 'datatables.net' )( window, $ );
  

  and :

  var $ = require( 'jquery' );
  var dt = require( 'datatables.net' )();
  

  i got this error :

  Cannot set property '$' of undefined
  

  I also try :

  var $ = require( 'jquery' );
  var dt = require( 'datatables.net' );
  

  i got this error :

  $(...).dataTable is not a function
  
• allan Posts: 61,665Questions: 1Answers: 10,096 Site admin

  April 2018

  Are you able to package up your project so I can try it out? I don't see any reason why that wouldn't work I'm afraid. Or can you put together a minimal example that shows the issue?

  Thanks,
  Allan
• fabien Posts: 1Questions: 0Answers: 0

  April 2018

  Try disable AMD loader in Webpack Encore like this :

  // webpack.config.js
  var Encore = require('@symfony/webpack-encore');
  
  Encore
      // the project directory where all compiled assets will be stored
      .setOutputPath('public/build/')
  
      // the public path used by the web server to access the previous directory
      .setPublicPath('/build')
  
      // will create public/build/app.js and public/build/app.css
      .addEntry('app', './assets/js/app.js')
  
      // allow legacy applications to use $/jQuery as a global variable
      .autoProvidejQuery()
  
      // enable source maps during development
      .enableSourceMaps(!Encore.isProduction())
  
      // empty the outputPath dir before each build
      .cleanupOutputBeforeBuild()
  
      // show OS notifications when builds finish/fail
      .enableBuildNotifications()
  
      // create hashed filenames (e.g. app.abc123.css)
      // .enableVersioning()
  
      // allow sass/scss files to be processed
      // .enableSassLoader()
  ;
  
  var config = Encore.getWebpackConfig();
  
  //disable amd loader
  config.module.rules.unshift({
    parser: {
      amd: false,
    }
  });
  
  module.exports = config;
  

  This code is also working :

  import dt from 'datatables.net-bs';
  dt(window, $);
  import 'datatables.net-bs/css/dataTables.bootstrap.css'
  
  $(document).ready( function () {
    $('.table-data').DataTable();
  });
  
• laudran Posts: 2Questions: 0Answers: 0

  May 2020

  @allan
  Any chance to have a manual about how to install with webpack ?
• colin Posts: 15,142Questions: 1Answers: 2,586

  May 2020

  There are no plans for a manual, but the best bet is to look through the forum, there are many threads discussing it, such as this one.

  Colin
• laudran Posts: 2Questions: 0Answers: 0

  November 2020

  Oh, I didn't come across this one.
  Thank you, I think I can start from here.