CODEWITHSUNDEEP
javascriptrequirejsdatatables
blgrnboy
blgrnboy

Reputation: 5167

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();

    });
});

Upvotes: 3

Views: 2365

Answers (2)

Ben Sewards
Ben Sewards

Reputation: 2661

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.

Upvotes: 1

Gyrocode.com
Gyrocode.com

Reputation: 58900

Most likely the cause of the error is:

  • Missing jQuery library (./dist/jquery-1.10.2.min.js)

    OR

  • Missing jQuery DataTables plug-in (./dist/jquery.dataTables.min.js)

    OR

  • jQuery DataTables version is 1.9.x or below. First line of jquery.dataTables.min.js should contain plug-in version.

    Method DataTable() only became available in jQuery DataTables 1.10.

Upvotes: 0

Related Questions