JQuery DataTables Fehler in require.js: undefined ist keine Funktion

Question

Hallo, ich versuche, datables so zu konfigurieren, dass sie mit require.js funktionieren. Ich habe kein Problem damit, es über reguläre Skript-Tags einzubinden, aber es schlägt bei require.js fehl mit einer Fehlermeldung undefined ist keine Funktion, wenn ich versuche, meine Tabelle zu initialisieren.

Hier ist mein Code:

require.config({
    paths: {
        'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min',
        'underscore': 'lib/underscore',
        'backbone': 'lib/backbone',
        'jquery.bootstrap': 'lib/bootstrap.min',
        'jquery.dataTables' : 'lib/jquery.dataTables',
        'bootstrap.datepicker' : 'lib/bootstrap-datepicker'
    },
    shim: {
        'underscore': {
            exports: '_'
        },
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'jquery.bootstrap': {
            deps: ['jquery']
        },
        'bootstrap.datepicker': {
            deps: ['jquery.bootstrap']
        }
    }
});

require(['jquery', 'jquery.bootstrap','jquery.dataTables','bootstrap.datepicker'],
    function () {

        var element = {
            "roeid": "TB582552763",
            "reportDate": "20140520",
            "status": "R",
            "rejReason": "Missing Order",
            "rejType": "Context",
            "roe": "#OE#|EX|N|TB582552751|||JPMS|20140520"
        };
        var data = [];
        for (var i = 0; i < 100; i++) {
            data.push(element);
        };

        var columns = [{
            sTitle: 'ROEID',
            data: 'roeid'
        }, {
            sTitle: 'Berichtsdatum',

            data: 'reportDate'
        }, {
            sTitle: 'Status',

            data: 'status'
        }, {
            sTitle: 'Rej-Grund',

            data: 'rejReason'
        }, {
            sTitle: 'Rej-Typ',

            data: 'rejType'
        }, {
            sTitle: 'roeid',

            data: 'roe'
        }];

        $(function() {

             var oatsTable = $('#oatsTable').DataTable({
                data: data,
                columns: columns
            });

            $('#oatsTable tbody').on('click', 'tr', function () {
                $(this).toggleClass('selected');
                console.log(oatsTable.row(this).data());
                console.log(oatsTable.rows('.selected').data().length + ' Zeile(n) ausgewählt');
            });

            $('#oats-upload-file').click(function () {
                $('#oats-file-upload-modal').modal('show');
            });

            $('#oats-file-submit').click(function () {
                $('#oats-file-upload-modal').modal('show');
            });
        });
    });

UPDATE

Da DataTables sich selbst als benanntes Modul identifiziert, genauso wie jquery, musste ich nur den Namen der 'jquery.dataTables' Abhängigkeit in 'datatables' umbenennen unter require.config paths, unten ist der funktionierende Code

require.config({
    paths: {
        'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min',
        'underscore': 'lib/underscore',
        'backbone': 'lib/backbone',
        'jquery.bootstrap': 'lib/bootstrap.min',
        'datatables' : 'lib/jquery.dataTables',
        'bootstrap.datepicker' : 'lib/bootstrap-datepicker'
    },
    shim: {
        'underscore': {
            exports: '_'
        },
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'jquery.bootstrap': {
            deps: ['jquery']
        },
        'bootstrap.datepicker': {
            deps: ['jquery.bootstrap']
        }
    }
});

require(['jquery', 'jquery.bootstrap','datatables','bootstrap.datepicker'],
    function () {

        var element = {
            "roeid": "TB582552763",
            "reportDate": "20140520",
            "status": "R",
            "rejReason": "Missing Order",
            "rejType": "Context",
            "roe": "#OE#|EX|N|TB582552751|||JPMS|20140520"
        };
        var data = [];
        for (var i = 0; i < 100; i++) {
            data.push(element);
        };

        var columns = [{
            sTitle: 'ROEID',
            data: 'roeid'
        }, {
            sTitle: 'Berichtsdatum',

            data: 'reportDate'
        }, {
            sTitle: 'Status',

            data: 'status'
        }, {
            sTitle: 'Rej-Grund',

            data: 'rejReason'
        }, {
            sTitle: 'Rej-Typ',

            data: 'rejType'
        }, {
            sTitle: 'roeid',

            data: 'roe'
        }];

        $(function() {

             var oatsTable = $('#oatsTable').DataTable({
                data: data,
                columns: columns
            });

            $('#oatsTable tbody').on('click', 'tr', function () {
                $(this).toggleClass('selected');
                console.log(oatsTable.row(this).data());
                console.log(oatsTable.rows('.selected').data().length + ' Zeile(n) ausgewählt');
            });

            $('#oats-upload-file').click(function () {
                $('#oats-file-upload-modal').modal('show');
            });

            $('#oats-file-submit').click(function () {
                $('#oats-file-upload-modal').modal('show');
            });

        });

    });

Answer 1

Da DataTables sich selbst als benanntes Modul identifiziert, genauso wie jquery, musste ich lediglich den Namen des Abhängigkeitsnamens 'jquery.dataTables' in 'datables' umbenennen unter require.config paths, damit dies funktioniert.

Unten steht der funktionierende Code:

require.config({
    paths: {
        'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min',
        'underscore': 'lib/underscore',
        'backbone': 'lib/backbone',
        'jquery.bootstrap': 'lib/bootstrap.min',
        'jquery.dataTables' : 'lib/jquery.dataTables',
        'bootstrap.datepicker' : 'lib/bootstrap-datepicker'
    },
    shim: {
        'underscore': {
            exports: '_'
        },
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'jquery.bootstrap': {
            deps: ['jquery']
        },
        'bootstrap.datepicker': {
            deps: ['jquery.bootstrap']
        }
    }
});

require(['jquery', 'jquery.bootstrap','jquery.dataTables','bootstrap.datepicker'],
    function () {

        var element = {
            "roeid": "TB582552763",
            "reportDate": "20140520",
            "status": "R",
            "rejReason": "Missing Order",
            "rejType": "Context",
            "roe": "#OE#|EX|N|TB582552751|||JPMS|20140520"
        };
        var data = [];
        for (var i = 0; i < 100; i++) {
            data.push(element);
        };

        var columns = [{
            sTitle: 'ROEID',
            data: 'roeid'
        }, {
            sTitle: 'Report Date',

            data: 'reportDate'
        }, {
            sTitle: 'Status',

            data: 'status'
        }, {
            sTitle: 'Rej Reason',

            data: 'rejReason'
        }, {
            sTitle: 'Rej Type',

            data: 'rejType'
        }, {
            sTitle: 'ROE',

            data: 'roe'
        }];

        $(function () {

             var oatsTable = $('#oatsTable').DataTable({
                data: data,
                columns: columns
            });

            $('#oatsTable tbody').on('click', 'tr', function () {
                $(this).toggleClass('selected');
                console.log(oatsTable.row(this).data());
                console.log(oatsTable.rows('.selected').data().length + ' Zeile(n) ausgewählt');
            });

            $('#oats-upload-file').click(function () {
                $('#oats-file-upload-modal').modal('show');
            });

            $('#oats-file-submit').click(function () {
                $('#oats-file-upload-modal').modal('show');
            });

        });

    });

Answer 2

Fügen Sie dies in Ihre shim-Konfiguration ein:

'jquery.dataTables': {
    deps: ['jquery'],
    exports: 'DataTable'
}

Das Endergebnis wird sein:

   shim: {
        'underscore': {
            exports: '_'
        },
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'jquery.bootstrap': {
            deps: ['jquery']
        },
        'bootstrap.datepicker': {
            deps: ['jquery.bootstrap']
        },
        'jquery.dataTables': {
             deps: ['jquery'],
             exports: 'DataTable'
        } 
    }

Was passiert hier?

Sie versuchen, DataTable ohne vorherige Zustimmung von RequireJS auszuführen. Um ein asynchrones Erlebnis mit RequireJS zu haben, müssen Sie angeben, welche Bibliotheken Sie verwenden möchten und wie Sie auf sie zugreifen möchten. Deshalb habe ich DataTable durch Ihre Shim-Konfiguration exportiert.