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

I have a lot of problems getting jQuery DataTables working. I look in different places and I just can't figure out how it goes.

The error I am getting using Chrome developer tools:

$ (...). 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 used):

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

      

Create.js (created 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();

    });
});

      

+3


source to share


2 answers


Since DataTables declares itself as a named module, the name "datatables" must be used when declaring a pathname in require config.



Live example here. Sign here .

+1


source


Most likely the reason for the error is:



  • JQuery ( ./dist/jquery-1.10.2.min.js

    ) library missing

    OR

  • JQuery DataTables ( ./dist/jquery.dataTables.min.js

    ) plugin is missing

    OR

  • JQuery DataTables version is 1.9.x or lower. The first line jquery.dataTables.min.js

    should contain the plugin version.

    The method DataTable()

    was only made available in jQuery DataTables 1.10.

0


source







All Articles