CODEWITHSUNDEEP
javascriptjquerydatatables
Liz
Liz

Reputation: 1048

DataTables is not initializing properly in RequireJS project

I am utilizing the jQuery DataTables plugin for a project that uses RequireJS. I have loaded in the DataTables library and initialization script into the RequireJS app.js script, and added the appropriate element ID to the table in my template file. I cannot get DataTables to initialize. Seemingly, DataTables and RequireJS do not play well together. I am not seeing any error messages in the console regarding the code below, but it is still not working as intended.

Here is my initialization script:

require(["datatables.net"], function() {
$(function() {
// initialize DataTables
$("#example").DataTable({
});
});
});

Here is my RequireJS configuration:

requirejs.config({
config: {
    //Set the config for the i18n
    //module ID
    i18n: {
        // Change this to en-us to use the strings in nls/en-us for example
        locale: 'en-gb'
    }
},
// "urlArgs": "ts=" + new Date().getTime(), // disable caching - remove in production
"baseUrl": "js/lib",
"paths": {
    "app":                       "../app",
    "jquery":                    "../lib/jquery-2-0-0.min",
    "bootstrap":                 "../lib/bootstrap.min",
    "backbone":                  "../lib/backbone-min",
    "underscore":                "../lib/underscore-min",
    "text":                      "../lib/text.min",
    "store":                     "../lib/store.min",
    "loader":                    "../lib/spin.min",
    "jquery-insertAtCaret":      "../lib/jquery-insertAtCaret",
    "splash-clearAndResetModal": "../lib/splash/clearAndResetModal",
    "splash-utils":              "../lib/splash/utils",
    "splash-proofhq":            "../lib/splash/proofhq",
    "splash-config":             "../config",
    "datatables.net":                "//cdn.datatables.net/1.10.10/js/jquery.dataTables.min",
    "datatables-js":             "../lib/datatables-js"
},
wrapShim: false,
// Add dependancies to the libs
shim: {
    // "enc-base64": {
    //     deps: ["sha256", "hmac-sha256"]
    // }
}
});

Upvotes: 4

Views: 2027

Answers (3)

Liz
Liz

Reputation: 1048

I FINALLY was able to get this working. Allan from DataTables helped me out.

Basically, what was happening... there was not anything wrong with the DataTables initialization code as such (as odd as that may sound).

It was running, but at the point it is running, the table was not in the document. The #example selector found no elements and therefore, nothing happened. Then the template code in admin.js kicks in and puts the table into the DOM - but it happens too late!

What needed to change was initializing the DataTable AFTER the HTML table is in the DOM. This is done method in admin.js:

.done(function() {
$('#js-loading-state').remove();
$('#example').DataTable();
});

The datatables-js.js file is not required since the loading of the HTML happens asynchronously. I hope this helps someone else with a similar project.

Upvotes: 1

charmeleon
charmeleon

Reputation: 2755

In https://github.com/erbanach/translation-system/blob/master/public-static/js/lib/datatables-js.js, change $('#example').dataTable(); to $('#example').DataTable();, with capital D.

Also, change the first line:

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

to this:

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

Also, don't initialize DataTables with an empty JSON object. Change:

$("#example").DataTable({});

To this:

$("#example").DataTable();

Upvotes: 0

shahid khan
shahid khan

Reputation: 439

try this in RequireJs config

"datatables.net":"..libs/datatables/js/jquery.dataTables",

Or try this

  "dataTables": "http://datatables.net/download/build/nightly/jquery.dataTables",

Upvotes: 0

Related Questions