How to install datatables with Symfony 4 ?

theurtin

I want to use DataTables in Symfony 4 project with Webpack Encore.

DataTables was installed with (installation instructions) :

yarn add datatables.net-bs4

then i try this (installation instructions) :

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

$(document).ready( function () {
    $('table').dataTable();
} );

but i get this error :

Cannot set property '$' of undefined

I found some help with this error but none work for me.

Any idea ?

colin

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

Hi !

No the error come from the line 2 :

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

colin

Hi @theurtin ,

This page here suggests the line should be:

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

Cheers,

Colin

theurtin

Thanks for helping me but now i get this error :

Cannot read property 'defaults' of undefined at dataTables.bootstrap4.js:47

allan

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

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

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

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

@allan
Any chance to have a manual about how to install with webpack ?

colin

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

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