Datatables jquery plugin in Magento 2?

Question

Datatable version 1.10.15

requirejs-config.js

var config = {
    paths:{
        'dataTables': 'df_Comercial/js/datatables.min',
    },
    map: {
        '*': {
            'dataTables': 'df_Comercial/js/datatables.min',
        }
    },
};

template.phtml

require(['jquery', 'dataTables'],function($){
            $('#commercial-customers-list-table').DataTable();
        });

But i keep getting several errors, sometime this:

require.js:166 Uncaught Error: Mismatched anonymous define() module: function (l){return c(l,window,document)}
http://requirejs.org/docs/errors.html#mismatch
    at makeError (require.js:166)
    at intakeDefines (require.js:1221)
    at require.js:1408

sometimes this other one:

datatables.min.js:206 Uncaught TypeError: Cannot read property 'responsive' of undefined
    at j (datatables.min.js:206)
    at responsive.js:14
    at Object.execCb (require.js:1650)
    at Module.check (require.js:866)
    at Module.<anonymous> (require.js:1113)
    at require.js:132
    at require.js:1156
    at each (require.js:57)
    at Module.emit (require.js:1155)
    at Module.check (require.js:917)

And then sometimes it just works without errors. The datatables plugin modifies the table always, i can search, sort, etc no matter what error displays but, i guessing, that because an error occurs it breaks the knockoutjs which does not add classes to the main navigation menu divs and then the css style is just gone

When the error appears the ul tag get stuck with

data-mage-init="{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}

Magento is in development mode, all caches disabled

Answer 1

Try to use this below code :

requirejs-config.js

var config = {
   map: {
       '*': {
           dataTables: 'df_Comercial/js/jquery.dataTables.min'
       }
   }
};

add jquery.dataTables.min.js file your web/js folder and add also css file of jquery.dataTables.min.css file in your web/css folder.

template.phtml

require(['jquery', "jquery/ui", 'dataTables'], function($) {
$('#commercial-customers-list-table').DataTable();
        });