23000

DataTables+RequireJS: Cannot read property 'defaults' of undefined

I have downloaded the full package of DataTables with all its module, since it can't be accessed through the CDN URL:

https://www.datatables.net/download/ (all options selected)

I'm trying to make it run with RequireJS, the same dependency system is used throughout the whole DataTables package, so it shouldn't be failing.

JSFiddle (edited for the purpose of JSFiddle): http://jsfiddle.net/42ucpwee/1/

My configuration results in this error:

datatables.js:93165 Uncaught TypeError: Cannot read property 'defaults' of undefined

datatables.js:93161-93171:

var DataTable = $.fn.dataTable; /* Set the defaults for DataTables initialisation */ $.extend( true, DataTable.defaults, { dom: "<'row'<'col-sm-6'l><'col-sm-6'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-5'i><'col-sm-7'p>>", renderer: 'bootstrap' } );

What can be the cause of this error, am I missing something or is my configuration wrong?

script.js:

define(['jquery','datatables.net'], function($) { $('#example').DataTable(); });

main.js:

requirejs.config({ baseUrl: "lib", paths: { 'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min', 'bootstrap': '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min', 'datatables.net': 'DataTables/datatables', 'script': '../js/script' }, shim: { 'bootstrap': { deps: ['jquery'] }, 'jquery': { exports: '$' }, 'datatables.net': { deps: ['bootstrap','jquery'] }, 'script': { deps: ['jquery','datatables.net'] } } }); requirejs(['script']);

index.html:

<html> <head> <link rel="stylesheet" href="https://cdn.datatables.net/s/bs-3.3.5/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.10,af-2.1.0,b-1.1.0,b-colvis-1.1.0,b-flash-1.1.0,b-html5-1.1.0,b-print-1.1.0,cr-1.3.0,fc-3.2.0,fh-3.1.0,kt-2.1.0,r-2.0.0,rr-1.1.0,sc-1.4.0,se-1.1.0/datatables.min.css" type="text/css" /> <script type="text/javascript" src="js/require.js"></script> <script type="text/javascript" src="js/main.js"></script> </head> <body> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> </tr> </tbody> </table> </body> </html>

Answer1:

An acceptable answer would be just to download the individual modules (instead of the single file option) and use the following script, it seems to cause less problems than including all at once:

http://jsfiddle.net/42ucpwee/2/

requirejs.config({ appDir: ".", baseUrl: "js", paths: { 'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min', 'bootstrap': '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min', 'datatables' : 'jquery.dataTables.min', 'datatables-bootstrap' : 'dataTables.bootstrap', }, shim : { 'jquery' : { exports : 'jquery' }, 'bootstrap' : { deps : [ 'jquery' ], exports : 'Bootstrap' }, 'datatables' : [ 'jquery' ], 'datatables-bootstrap' : [ 'datatables' ], } }); require([ 'jquery', 'datatables-bootstrap' ], function ($) { $('#example').DataTable(); });

Recommend

  • How to display the mean value and error bars in a percent bar graph
  • “stack level too deep” When Processing Carrierwave Image Versions in Nested Form
  • Grid column filter not working with two models in magento custom module
  • Angularjs - Pagination appear after search filter
  • Compare a column between 2 csv files and write differences using Python
  • Python error: len() of unsized object while using statsmodels with one row of data
  • href inside href [duplicate]
  • Resizing ToolStripButtons to fit complete BackGround image
  • Linear gradient not applying in Webkit with d3 generated SVG
  • How to emulate integrated numeric keypad cursor keys in linux
  • jQuery file download plugin
  • Bootstrap Popover showing at wrong place upon zoom in/out or resizing Browser window
  • if some function is not optimized does it mean that all functions where it is declared are not optim
  • Why doesn't a local variable live long enough for thread::scoped?
  • Why does the font in these TD elements render at different sizes?
  • How to add closing tag for canvas in three js rendered Canvas?
  • Get the pasted content on document on paste event
  • garbled css name when styling within UiBinder
  • Angular Bootstrap Carousel Slide Transition not working correctly
  • How to open html table in xls on click of a button
  • Bootstrap (v3.3.4) glyphicons not displayed in IE when refresh page (F5)
  • where do I find the xml.dom python package for the python-2.6.0-8.9.28 and I have a suse/x86_64 vers
  • gspread or such: help me get cell coordinates (not value)
  • Read a local file using javascript
  • Opengl-es onTouchEvents problem or a draw problem? [closed]
  • align graphs with different xlab
  • Unanticipated behavior
  • bootstrap to use multiple ng-app
  • using conditional logic : check if record exists; if it does, update it, if not, create it
  • using HTMLImports.whenReady not working in chrome
  • Can't mass-assign protected attributes when import data from csv file
  • Easiest way to encapsulate a HTML5 webpage into an android app?
  • Busy indicator not showing up in wpf window [duplicate]
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal