数据表Bootstrap主题在使用ReactJS时不适用 [英] Datatables Bootstrap theme not applying when using ReactJS
问题描述
我是RequireJS的新手，所以请保持温和！
I am fairly new to RequireJS, so please be gentle!
下面是我的HTML和JS的链接，如果你运行它，你会看到 数据表已正确初始化 但它没有应用引导程序主题。
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.
链接问题：
https：// jsfiddle。 net / sajjansarkar / c2f7s2jz / 2 /
我做错了什么？
以下是我的JS（如果小提琴不起作用）：
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:
-
文件，用于
datatablesinpaths看起来它包含一堆串联在一起的匿名AMD模块。匿名模块是define调用未设置模块名称的模块。这些模块从启动其加载的require调用中获取其模块名称。 您不能只是连接匿名模块来创建一个包。对define的调用必须也更改为添加模块name作为define调用的第一个参数。该文件可能对不使用任何模块加载器的人有用，但你不能将它与RequireJS一起使用。
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.
所以你必须设置单独的路径用于 datatables 和 datatables.bootstrap 。
So you have to setup separate paths for datatables and datatables.bootstrap.
对于 datatables ， shim 是无用的，因为 datatables 调用 define 和 shim 仅适用于不的文件调用 define 。
Your shim for datatables is useless because datatables calls define and shim is only for files that do not call define.
如果要对数据表使用Bootstrap样式，则必须加载 datatables.bootstrap 这样或那样。你目前不这样做。 （即使您加载的软件包已修复为使用RequireJS，您也必须在某处显式请求 datatables.bootstrap 。）
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 将尝试加载 datatables.net 而不是数据表。你需要在任何地方引用 datatables 作为 datatables.net ，或者你可以使用 map 就像我在下面做的那样。
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.
如果我修改你的JavaScript，我会得到正确的结果：
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();
});
这是一个分叉小提琴。
这篇关于数据表Bootstrap主题在使用ReactJS时不适用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
