Question

我是RequireJS的新手，所以请保持温和！

下面是我的HTML和JS的链接，如果你运行它，你会看到 数据表已正确初始化 但它没有应用引导主题。 / p>

与问题相关联：

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

我做错了什么？

下面是我的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：

<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

您尝试做的事情有很多问题：

您在datatables中用于paths的{{3}}看起来像是包含一堆串联在一起的匿名AMD模块。匿名模块是define调用未设置模块名称的模块。这些模块从发起加载的require调用中获取其模块名称。 您不能只是连接匿名模块来创建一个包。对define的调用必须也更改为添加模块名称作为{{的第一个参数1}}打电话。该文件可能对不使用任何模块加载器的人有用，但你不能将它与RequireJS一起使用。

因此，您必须为define和paths设置单独的datatables。
datatables.bootstrap shim datatables无效，因为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(); });

这是一个分叉的file。

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

1 个答案: