使用ReactJS時不適用Datatables Bootstrap主題

Question

我是RequireJS的新手，請保持溫柔！

下面是我的HTML和JS的鏈接，如果運行它，您將看到數據表已正確初始化，但未應用引導主題。

鏈接問題：

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看起來像它包含連接在一起一束匿名的AMD模塊。 匿名模塊是為其define調用未設置模塊名稱的模塊。 此類模塊從啟動其加載的require調用中獲取其模塊名稱。 您不能僅將匿名模塊連接起來以構成一個捆綁包。 還必須更改對define的調用，以將模塊名稱添加為define調用的第一個參數。 該文件對於不使用任何模塊加載器的人可能有用，但是您不能將其與RequireJS一起使用。
因此，您必須為datatables和datatables.bootstrap設置單獨的paths 。
您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();
});

這是一個分叉的小提琴。

使用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