使用 ReactJS 时数据表 Bootstrap 主题不适用

Question

我是 RequireJS 的新手，所以请多关照！

下面是我的 HTML 和 JS 的 link 如果你运行它你会看到 数据表被正确初始化 但它没有应用 bootstrap 主题。

Link 有问题：

https://jsfiddle.net/sajjansarkar/c2f7s2jz/2/

我做错了什么？

下面是我的 JS（以防 fiddle 不起作用）：

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>0,800</td>
    </tr>
...
</tbody></table>

</body>

Answer 1

您尝试执行的操作存在一些问题：

您在 paths 中用于 datatables 的 file 看起来像是包含一堆连接在一起的匿名 AMD 模块。匿名模块是 define 调用未为其设置模块名称的模块。这些模块从启动它们的加载的 require 调用中获取它们的模块名称。 您不能仅仅连接匿名模块来制作一个包。必须还更改对 define 的调用以添加模块名称作为define 调用的第一个参数。该文件可能对不使用任何模块加载器的人有用，但您不能将其与 RequireJS 一起使用。

因此您必须为 datatables 和 datatables.bootstrap 设置单独的 paths。
你的 datatables 的 shim 没用，因为 datatables 调用 define 而 shim 仅适用于执行不调用define.
如果要对数据表使用 Bootstrap 样式，则必须以一种或另一种方式加载 datatables.bootstrap。你目前不这样做。（即使你加载的包被固定为与 RequireJS 一起工作，你也必须在某处明确请求 datatables.bootstrap。）
datatables.bootstrap 将尝试加载 datatables.net 而不是 datatables。您需要在任何地方都将 datatables 称为 datatables.net，或者您可以像我下面那样使用 map。

如果我将您的 JavaScript 修改为这样，我会得到正确的结果：

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();
});

这是一个分叉的fiddle。

使用 ReactJS 时数据表 Bootstrap 主题不适用

Datatables Bootstrap theme not applying when using ReactJS

javascript

jquery

themes

datatables

requirejs