Javascript 使用ReactJS时Datatables引导主题不适用_Javascript_Jquery_Datatables_Requirejs_Themes

Javascript 使用ReactJS时Datatables引导主题不适用

javascript jquery datatables requirejs

Javascript 使用ReactJS时Datatables引导主题不适用,javascript,jquery,datatables,requirejs,themes,Javascript,Jquery,Datatables,Requirejs,Themes,我对RequireJS还比较陌生，所以请温柔一点下面是我的HTML和JS的链接，如果您运行它，您将看到数据表已正确初始化，但它没有应用引导主题与问题的链接：我做错了什么下面是我的JS（以防小提琴不起作用）： HTML: <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <link

我对RequireJS还比较陌生，所以请温柔一点

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

与问题的链接：

我做错了什么

下面是我的JS（以防小提琴不起作用）：

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>


名称
位置
办公室
年龄
开始日期
薪水
老虎尼克松
系统架构师
爱丁堡
61
2011/04/25
$320,800
...

您尝试执行的操作存在许多问题：

您在

路径

中使用的

数据表

看起来包含一组连接在一起的匿名AMD模块。匿名模块是

define

调用未设置模块名称的模块。这些模块从启动加载的

require

调用中获取模块名称您不能只是将匿名模块连接起来以形成一个捆绑。对

define

的调用也必须更改，以将模块名称作为第一个参数添加到

define

调用中。该文件可能对不使用任何模块加载程序的人有用，但您不能将其用于RequireJS

因此，您必须为

datatables

和

datatables.bootstrap设置单独的路径


对于数据表
的垫片
是无用的，因为数据表
调用定义
，垫片
仅用于执行而非调用定义
的文件

如果要对数据表使用引导样式，则必须以某种方式加载Datatables.Bootstrap
。您目前没有这样做。（即使您加载的bundle已修复为与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();
});

这里有一个分叉。
您尝试执行的操作存在许多问题：
您在路径
中使用的数据表
看起来包含一组连接在一起的匿名AMD模块。匿名模块是define
调用未设置模块名称的模块。这些模块从启动加载的require
调用中获取模块名称您不能只是将匿名模块连接起来以形成一个捆绑。对define
的调用也必须更改，以将模块名称作为第一个参数添加到define
调用中。该文件可能对不使用任何模块加载程序的人有用，但您不能将其用于RequireJS
因此，您必须为datatables
和datatables.bootstrap设置单独的路径

对于数据表
的垫片
是无用的，因为数据表
调用定义
，垫片
仅用于执行而非调用定义
的文件

如果要对数据表使用引导样式，则必须以某种方式加载Datatables.Bootstrap
。您目前没有这样做。（即使您加载的bundle已修复为与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();
});

这是一个分岔的回答。
绝对是绝妙的回答，先生。我曾经在非requireJS应用程序中使用过相同的捆绑包（由datatables builder构建），但不知何故，我愚蠢地认为它即使在AMD的世界中也能工作。我完全理解你的解释。因为我需要更多的数据表插件，所以我单独下载了它们，并将它们单独“模块化”。我希望我能多次投票支持你的答案！因此，如果您确实使用路径（错误地）指定连接的捆绑包，这些匿名模块会相互覆盖吗？所以DataTables作者提供的连接包基本上是无用的，对吗？他们定义了不能使用的匿名模块。回答得非常好，先生。我曾经在非requireJS应用程序中使用过相同的捆绑包（由datatables builder构建），但不知何故，我愚蠢地认为它即使在AMD的世界中也能工作。我完全理解你的解释。因为我需要更多的数据表插件，所以我单独下载了它们，并将它们单独“模块化”。我希望我能多次投票支持你的答案！因此，如果您确实使用路径（错误地）指定连接的捆绑包，这些匿名模块会相互覆盖吗？所以DataTables作者提供的连接包基本上是无用的，对吗？它们定义了不能使用的匿名模块。