DataTables not initialized properly in RequireJS project

Question

I am using jQuery DataTables plugin for a project that uses RequireJS . I loaded the DataTables library and initialization script in the RequireJS app.jsscript and added the corresponding element identifier to the table in the template file. I cannot get DataTables to initialize. It appears that DataTables and RequireJS interact poorly with each other. I do not see console error messages regarding the code below, but it still does not work properly.

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"]
    // }
}
});

Answer 1

. DataTables .

, ... DataTables ( ).

, . #example , . admin.js DOM - !

, DataTable. , HTML- DOM. done admin.js:

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

datatables-js.js , HTML . , - .

Answer 2

RequireJs

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

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

Answer 3

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

Also change the first line:

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

:

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

Also, do not initialize DataTables with an empty JSON object. Change:

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

For this:

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