CODEWITHSUNDEEP
javascriptjqueryrequirejsdatatables
Brent
Brent

Reputation: 313

DataTables with RequireJS

I am trying to use plain and simple DataTables with RequireJS. But I can not figure out how to setup my main.js file. This is what I have:

require.config({
  paths: {
    modernizr: 'libs/custom.modernizr',
    jquery: '../components/jquery/jquery',
    datatables: '../components/datatables/media/src/DataTables'
},

However as soon as add 

require(["datatables"]), function (whatever) {... });

I always receive this error:

Error: Module name "api.static.js" has not been loaded yet for context: _

I've tried using "shim" to make jquery a dependency of datatable but I get the same error. Does anyone know how to setup a really simple datatable using requireJS?

UPDATE:

Here is the full main.js file:

require.config({
paths: {
    jquery: '../components/jquery/jquery', 
    datatables: '../components/datatables/media/src/DataTables'
},
shim: {
      "datatables": ['jquery']
     }
});

require(["jquery", "datatables"], function () {

$('#test').dataTable( {
    "aaData": [
        ['Trident', 'Internet Explorer 4.0', 'Win 95+', 4, 'X'],
        ['Trident', 'Internet Explorer 5.0', 'Win 95+', 5, 'C']
    ],
    "aoColumns": [
        { "sTitle": "Engine" },
        { "sTitle": "Browser" },
        { "sTitle": "Platform" },
        { "sTitle": "Version" },
        { "sTitle": "Grade" }
    ]
   });
});

And here is the exact error message. I tried with multiple versions of Jquery and in multiple browsers and always receive this same message: Error Message I recieve

If it matters I built this main.js by using the zurb-foundation yo generator and then using

bower install --save jquery#1.11.0 
bower install --save datatables

Upvotes: 2

Views: 2403

Answers (1)

Brent
Brent

Reputation: 313

I figured it out. The problem was that I was pointing datatables variable in this line

datatables: '../components/datatables/media/src/DataTables'

to the file "DataTables.js." This is the wrong file. It should be pointing to "jquery.dataTables.js" like this:

datatables: '../components/datatables/media/js/jquery.dataTables'

Hopefully, this helps someone avoid this confusion in the future.

Upvotes: 2

Related Questions