Trouble optimizing Datatables with DT_bootstrap.js or any datatables plugin

jdivock

I was curious if anyone else has run into a similar situation. I'm currently implementing an application that's making use of jquery.dataTables.js, DT_bootstrap.js, and dataTables.fnReloadAjax. Everything was great until I ran my optimizer to combine everything into one js file, at which point Datatables started exploding. Backing up, I simply made one js file with the 3 datatables js files concatenated into one and it looks like none of the $.fn.DataTable objects are available when code is appended to jquery.dataTables.js. That this only seems to work when they're included as separate files, which seems odd to me.

For reference here are the errors I'm seeing

[code]
// .... end of jquery.dataTables.js

// jQuery aliases
$.fn.DataTable = DataTable;
$.fn.dataTable = DataTable;
$.fn.dataTableSettings = DataTable.settings;
$.fn.dataTableExt = DataTable.ext;
}));

}(window, document));

// ... begining of DT_bootstrap.js
/* Set the defaults for DataTables initialisation */
$.extend( true, $.fn.dataTable.defaults, {
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
}
} );
[/code]

which produces the error

[code]
TypeError: Cannot read property 'defaults' of undefined
[/code]

jdivock

And for reference, here it is optimized and not yet uglified where fnReloadAjax is getting appended right after and failing

[code]
, function(a) {
return typeof a == "string" && a.indexOf("<") != -1 && a.indexOf(">") != -1 ? "html" : null;
} ]), $.fn.DataTable = DataTable, $.fn.dataTable = DataTable, $.fn.dataTableSettings = DataTable.settings, $.fn.dataTableExt = DataTable.ext;
});
}(window, document)/* end of datatables.min.js start of fnReloadAjax */ , $.fn.dataTableExt.oApi.fnReloadAjax = function(a, b, c, d) {
typeof b != "undefined" && b != null && (a.sAjaxSource = b);
[/code]

which throws

[code]
Uncaught TypeError: Cannot read property 'oApi' of undefined
[/code]

allan

Sounds like a load order error. Can you please link us to the page.

Allan

jdivock

I played with it a little longer and it seems like datatables, DT_bootstrap, and fnReloadAjax just do not play nice with requirejs. I'm still coming up to speed on requirejs, but it looks like it loads the files without evaluating them, so I can't pull in DT_bootstrap or any of the function plugins which assume the existence of

$.fn.DataTable = DataTable;
$.fn.dataTable = DataTable;
$.fn.dataTableSettings = DataTable.settings;
$.fn.dataTableExt = DataTable.ext;

I ended up just merging the code I needed into jquery.datatables.js which wasn't preferable, but it was the only way I could make it work and run through the optimizer properly.