使用ReactJS时不适用Datatables Bootstrap主题

Question

I am fairly new to RequireJS, so please be gentle! 我是RequireJS的新手，请保持温柔！

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. 下面是我的HTML和JS的链接，如果运行它，您将看到数据表已正确初始化，但未应用引导主题。

Link with problem: 链接问题：

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

What am I doing wrong? 我究竟做错了什么？

Below is my JS (in case the fiddle doesnt work): 以下是我的JS（以防小提琴无法正常工作）：

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: 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>

Answer 1

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. 该文件使用的datatables中paths看起来像它包含连接在一起一束匿名的AMD模块。 An anonymous module is a module for which the define call does not set the module name. 匿名模块是为其define调用未设置模块名称的模块。 Such modules get their module name from the require call that initiated their loading. 此类模块从启动其加载的require调用中获取其模块名称。 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. 还必须更改对define的调用，以将模块名称添加为define调用的第一个参数。 That file may be useful for people who do not use any module loader, but you cannot use it with RequireJS. 该文件对于不使用任何模块加载器的人可能有用，但是您不能将其与RequireJS一起使用。
So you have to setup separate paths for datatables and datatables.bootstrap . 因此，您必须为datatables和datatables.bootstrap设置单独的paths 。
Your shim for datatables is useless because datatables calls define and shim is only for files that do not call define . 您shim的datatables是没用的，因为datatables呼叫define和shim只对没有调用的文件define 。
If you want to use the Bootstrap stylings for Datatables, then you must load datatables.bootstrap one way or another. 如果要为数据表使用Bootstrap样式，则必须以一种或另一种方式加载datatables.bootstrap 。 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.) （即使您加载的捆绑软件已固定为可与RequireJS配合使用，您也必须在某处显式请求datatables.bootstrap 。）
datatables.bootstrap will try to load datatables.net rather than datatables . datatables.bootstrap将尝试加载datatables.net而不是datatables 。 You need to refer to datatables as datatables.net everywhere or you can use a map like I do below. 您需要在所有地方都将datatables称为datatables.net ，或者可以像下面我一样使用map 。

I get proper results if I modify your JavaScript to this: 如果将您的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();
});

Here's a forked fiddle . 这是一个分叉的小提琴。

使用ReactJS时不适用Datatables Bootstrap主题

问题描述

1 个解决方案

解决方案1
3 已采纳 2017-07-25 16:23:30

使用ReactJS时不适用Datatables Bootstrap主题

问题描述

1 个解决方案

解决方案1 3 已采纳 2017-07-25 16:23:30

解决方案1
3 已采纳 2017-07-25 16:23:30