Question

I have the following code:

File 1:
$(document).ready(function () {
   addDataTableExts();
}

File 2:
function addDataTableExts() {
   $.extend($.fn.dataTableExt.oStdClasses, {
        sWrapper: 'no-margin last-child'
   }
}

This seems to work okay. I now tried to replace this with the following:

File 2:
(function () {

    $.extend($.fn.dataTableExt.oStdClasses, {
        sWrapper: 'no-margin last-child'
    }
}

This doesn’t work.

Is there some reason why it only seems to work if I do this the first way? I thought
that by changing the first line of File 2 then it would cause the code to get
executed without me calling it.

Answer 1

You changed the code from running in the ready event to running immediately. It seems that you are loading your datatable plugin after loading file 2, so the plugin doesn’t exist yet when you try to use it.

If you put it back in the ready event, it should work:

File 2:
$(document).ready(function () {

  $.extend($.fn.dataTableExt.oStdClasses, {
    sWrapper: 'no-margin last-child'
  }

});

Note: Events in jQuery are not exclusive, so you can have several ready event handlers in the same page without problems.