Bootstrap theme not applying when using RequireJS

sajjansarkar · July 2017

Hi,

I am fairly new to requirjs, so please be kind!

Below is a link with my HTML and JS and if you run it you will see that the datatble is initialised correctly but it is not applying the bootstrap theme.

**Link with problem: **
https://jsfiddle.net/sajjansarkar/c2f7s2jz/2/

What am I doing wrong?

Below is my JS (in case the fiddle doesnt work):

requirejs.config({
  paths: {
    'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery',
    'bootstrap': 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min',
    'datatables': 'https://cdn.datatables.net/v/bs/dt-1.10.12/b-1.2.2/b-colvis-1.2.2/b-html5-1.2.2/cr-1.3.2/fh-3.1.2/kt-2.1.3/r-2.1.0/sc-1.4.2/se-1.2.0/datatables.min',

  },
  shim: {
    'bootstrap': {
      deps: ['jquery']
    },
    'datatables': ['jquery', 'bootstrap'],

  }
});


require([
  'jquery',
  'bootstrap', , 'datatables'
], function($, Bootstrap, datatables) {
  'use strict';

  $('#example').dataTable();
});

And HTML:

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" />
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.12/b-1.2.2/b-colvis-1.2.2/b-html5-1.2.2/cr-1.3.2/fh-3.1.2/kt-2.1.3/r-2.1.0/sc-1.4.2/se-1.2.0/datatables.min.css" />
</head>
<body>
<table id="example" class="table table-striped table-bordered table-hover table-condensed dt-responsive data-table" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>

 <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
...
</tbody></table>

</body>

sajjansarkar · July 2017

OK, thanks to Louis over SO I was able to realize my mistake, posting his response and the working code for posterity:

"There is a number of problems with what you are trying to do:

The file you use for datatables in paths looks like it contains a bunch of anonymous AMD modules concatenated together. An anonymous module is a module for which the define call does not set the module name. Such modules get their module name from the require call that initiated their loading. You cannot just concatenate anonymous modules to make a bundle. The calls to define must also be changed to add the module name as the first argument to the define call. That file may be useful for people who do not use any module loader, but you cannot use it with RequireJS.

So you have to setup separate paths for datatables and datatables.bootstrap.
Your shim for datatables is useless because datatables calls define and shim is only for files that do not call define.
If you want to use the Bootstrap stylings for Datatables, then you must load datatables.bootstrap one way or another. You currently do not do that. (Even if the bundle you load was fixed to work with RequireJS, you'd have to explicitly request datatables.bootstrap somewhere.)
datatables.bootstrap will try to load datatables.net rather than datatables. You need to refer to datatables as datatables.net everywhere or you can use a map like I do below.
I get proper results if I modify your JavaScript to this:"

requirejs.config({
  paths: {
    'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery',
    'bootstrap': 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min',
    'datatables': 'https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min',
    'datatables.bootstrap': 'https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min',
  },
  shim: {
    'bootstrap': {
      deps: ['jquery']
    },
  },
  map: {
    '*': {
      'datatables.net': 'datatables',
    }
  },
});


require(['jquery', 'datatables.bootstrap'], function($) {
  'use strict';

  $('#example').dataTable();
});

thememakker · August 2018

How to include export button in requirejs config? I am getting error while including export buttons.

Bootstrap theme not applying when using RequireJS

Bootstrap theme not applying when using RequireJS

Answers

Howdy, Stranger!

Categories

DataTables

Bootstrap theme not applying when using RequireJS

Bootstrap theme not applying when using RequireJS

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables