Datatables ReactJSを使用しているときにBootstrapのテーマが適用されない

私は、RequireJSをかなり新しくしていますので、優しくしてください！以下はDatatables ReactJSを使用しているときにBootstrapのテーマが適用されない

私のHTMLとJSとのリンクであり、あなたはそれを実行する場合は、データテーブルが正しくを初期化されますが、それは、ブートストラップのテーマを適用していないことがわかります。問題と

リンク：

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

私が間違って何をしているのですか？以下は

は（フィドルdoesntの仕事の場合）私の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を設定する必要があります。 datatables通話defineとshimだけないコールdefineを行うファイルのためのものですので、datatablesため
あなたshimは無用です。
データシート用のブートストラップスタイリングを使用する場合は、どちらか一方の方法で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

絶対に明るい回答です。私は、non-requireJSアプリケーション用に同じバンドル（datatablesビルダーによって構築された）を使用していましたが、何とかばかげてAMDワールドでも動作すると思っていました。あなたの説明を完全に理解しました。私がデータテーブル用のプラグインをもっと必要としたので、私はそれらを別々にダウンロードし、個別に "モジュール化"しました。私はあなたの答えを何回もupvoteしてもらいたいです！ –

Datatables ReactJSを使用しているときにBootstrapのテーマが適用されない

答えて

関連する問題