jQuery datatables error in require.js: undefined is not a function

Question

Hi I'm trying to configure datables to work with require.js. I don't have a problem having it to work via regular script tags, but it fails in require.js with an error message undefined is not function when I attempt to initialize my datatable.

Below is my 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: '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 + ' row(s) selected');
            });

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

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

        });


    });

UPDATE

Since DataTables identifies itself as a named module, same way like jquery, all I had to do for this to work to use the same name as a named module, by renaming 'jquery.dataTables' dependency name to 'datables' under require.config paths, below is the working 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: 'Report Date',

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

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

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

            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 + ' row(s) selected');
            });

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

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

        });


    });

Answer 1

Since DataTables identifies itself as a named module, same way like jquery, all I had to do for this to work to use the same name as a named module, by renaming 'jquery.dataTables' dependency name to 'datables' under require.config paths,

below is the working 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: '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 + ' row(s) selected');
            });

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

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

        });


    });