Datatables使用ReactJS時引導主題不適用

我對RequireJS相當陌生，所以請溫柔！Datatables使用ReactJS時引導主題不適用

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

來源

2017-07-25 Sajjan Sarkar

有一些問題，你正在嘗試做的事：

您使用的file在paths中的看起來像是包含一連串串聯的匿名AMD模塊。匿名模塊是define調用不爲其設置模塊名稱的模塊。這些模塊從啓動它們的加載的require調用中獲得它們的模塊名稱。 你不能只連接匿名模塊來創建一個包。調用define必須也被更改爲添加模塊名稱作爲調用define調用的第一個參數。該文件對於不使用任何模塊加載器的用戶可能很有用，但不能在RequireJS中使用。

因此，您必須爲datatables和datatables.bootstrap設置單獨的paths。
你shim爲datatables是無用的，因爲datatables電話define和shim僅適用於做不呼叫define文件。
如果您想使用數據表的引導程序樣式，那麼您必須以某種方式加載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。

來源

2017-07-25 16:23:30 Louis

絕對輝煌的答案先生。我爲非requireJS應用程序使用了相同的包（由數據表構建器構建），並且以某種方式愚蠢地認爲即使在AMD世界中它也可以工作。我完全理解您的解釋。由於我需要更多的數據表插件，我已經分別下載並單獨「模塊化」它們。我希望我可以upvote您的答案多次！ –

Datatables使用ReactJS時引導主題不適用

回答

相關問題