title: RequireJS - $(...).DataTable is not a function
body: <p>I am having a lot of trouble with getting jQuery DataTables to work.  I have been looking in numerous places, and just can't seem to get to the bottom of it.</p>
  
  <p>The error I receive via Chrome developer tools is:</p>
  
  <blockquote>
    <p>$(...).DataTable is not a function</p>
  </blockquote>
  
  <p><strong>app.js:</strong></p>
  
  <pre><code>requirejs.config({
      "baseUrl": "../Scripts",
      "paths": {
          app: "./app",
          essentials: "./dist/essentials.min",
          jquery: "./dist/jquery-1.10.2.min",
          "jquery.bootstrap": "./dist/bootstrap.min"
          "jquery.dataTables": "./dist/jquery.dataTables.min",
          "jquery.dataTables.bootstrap": "./dist/jquery.dataTables.bootstrap.min"
  
      },
      "shim": {
          "essentials": ["jquery"],
          "jquery.dataTables": ["jquery"],
          "jquery.dataTables.bootstrap": ["jquery.dataTables"],
          "jquery.bootstrap": ["jquery"]
      }
  });
  
  // Load the main app module to start the app
  requirejs(["app/main"]);
  </code></pre>
  
  <p><strong>main.js (not in use):</strong></p>
  
  <pre><code>require(["jquery"], function ($) {
      $(function () {
      });
  });
  </code></pre>
  
  <p><strong>Create.js (Generated from TypeScript):</strong></p>
  
  <pre><code>define(["require", "exports", "../../Shared/ModalHelper"], function (require, exports, Helper) {
      require(["jquery", "essentials", "jquery.bootstrap", "jquery.dataTables", "jquery.dataTables.bootstrap"], function ($) {
          function initilializeTables() {
              var attrSelectDataTable = $('#selectAttrsTable').DataTable({
                  paging: true,
                  bInfo: true,
                  "columnDefs": [
                      { "orderable": false, "targets": 0 }
                  ],
                  scrollY: 400
              });
              var attrPreviewDataTable = $('#selectedAttrsTable').DataTable({
                  paging: true,
                  bInfo: true,
                  "columnDefs": [
                      { "orderable": false, "targets": 0 },
                      { "orderable": false, "targets": 5 }
                  ],
                  scrollY: 400
              });
  
          }
  
          initilializeTables();
  
      });
  });
  </code></pre>