Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

RequireJS - $(...).DataTable is not a function

I am having a lot of trouble with getting jQuery DataTables to work. I have been looking in numerous places, and just can't seem to get to the bottom of it.

The error I receive via Chrome developer tools is:

$(...).DataTable is not a function

app.js:

requirejs.config({
    "baseUrl": "../Scripts",
    "paths": {
        app: "./app",
        essentials: "./dist/essentials.min",
        jquery: "./dist/jquery-1.10.2.min",
        "jquery.bootstrap": "./dist/bootstrap.min"
        "jquery.dataTables": "./dist/jquery.dataTables.min",
        "jquery.dataTables.bootstrap": "./dist/jquery.dataTables.bootstrap.min"

    },
    "shim": {
        "essentials": ["jquery"],
        "jquery.dataTables": ["jquery"],
        "jquery.dataTables.bootstrap": ["jquery.dataTables"],
        "jquery.bootstrap": ["jquery"]
    }
});

// Load the main app module to start the app
requirejs(["app/main"]);

main.js (not in use):

require(["jquery"], function ($) {
    $(function () {
    });
});

Create.js (Generated from TypeScript):

define(["require", "exports", "../../Shared/ModalHelper"], function (require, exports, Helper) {
    require(["jquery", "essentials", "jquery.bootstrap", "jquery.dataTables", "jquery.dataTables.bootstrap"], function ($) {
        function initilializeTables() {
            var attrSelectDataTable = $('#selectAttrsTable').DataTable({
                paging: true,
                bInfo: true,
                "columnDefs": [
                    { "orderable": false, "targets": 0 }
                ],
                scrollY: 400
            });
            var attrPreviewDataTable = $('#selectedAttrsTable').DataTable({
                paging: true,
                bInfo: true,
                "columnDefs": [
                    { "orderable": false, "targets": 0 },
                    { "orderable": false, "targets": 5 }
                ],
                scrollY: 400
            });

        }

        initilializeTables();

    });
});
like image 303
blgrnboy Avatar asked Jul 12 '26 19:07

blgrnboy


1 Answers

Since DataTables declares itself as a named module, the "datatables" name has to be used when declaring a name for the path in require config.

Live example here. Credit to here.

like image 107
Ben Sewards Avatar answered Jul 15 '26 09:07

Ben Sewards