{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 迷人小祖宗 的问题《Datatables Bootstrap theme not applying when using》','https://www.manongdao.com/q-1268468.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I am fairly new to RequireJS, so please be gentle!
Below is a link with my HTML and JS and if you run it you will see that the datatable is initialized 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();
});
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>
There is a number of problems with what you are trying to do:
The file you use for
datatablesinpathslooks like it contains a bunch of anonymous AMD modules concatenated together. An anonymous module is a module for which thedefinecall does not set the module name. Such modules get their module name from therequirecall that initiated their loading. You cannot just concatenate anonymous modules to make a bundle. The calls todefinemust also be changed to add the module name as the first argument to thedefinecall. 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
pathsfordatatablesanddatatables.bootstrap.Your
shimfordatatablesis useless becausedatatablescallsdefineandshimis only for files that do not calldefine.If you want to use the Bootstrap stylings for Datatables, then you must load
datatables.bootstrapone 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 requestdatatables.bootstrapsomewhere.)datatables.bootstrapwill try to loaddatatables.netrather thandatatables. You need to refer todatatablesasdatatables.neteverywhere or you can use amaplike I do below.I get proper results if I modify your JavaScript to this:
Here's a forked fiddle.