Datatables Bootstrap Thema nicht anwendbar bei Verwendung von ReactJS

Ich bin ziemlich neu in RequireJS, also bitte sei sanft!Datatables Bootstrap Thema nicht anwendbar bei Verwendung von ReactJS

Unten ist ein Link mit meinem HTML und JS und wenn Sie es laufen Sie werden sehen, dass die Datentabelle korrekt initialisiert wird, aber es wird die Bootstrap-Thema nicht anwenden.

Verbindung mit Problem:

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

Was mache ich falsch?

Unten ist mein JS (bei der Geige nicht funktioniert):

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>

Quelle

2017-07-25 Sajjan Sarkar

Es gibt eine Reihe von Problemen mit dem, was Sie zu tun versuchen:

Die file Sieverwendenin paths sieht aus wie es eine Reihe von anonymen AMD-Modulen enthält, die miteinander verkettet sind. Ein anonymes Modul ist ein Modul, für das der Aufruf den Modulnamen nicht festlegt. Solche Module erhalten ihren Modulnamen von dem Aufruf , der ihr Laden initiiert hat. Sie können nicht einfach anonyme Module verketten, um ein Bündel zu erstellen. Die Aufrufe an müssen auch geändert werden, um den Modulnamen als erstes Argument zum Aufruf hinzuzufügen. Diese Datei kann für Personen nützlich sein, die keinen Modullader verwenden, aber Sie können sie nicht mit RequireJS verwenden.

Sie müssen also paths für datatables und datatables.bootstrap separat einrichten.
Ihre shim für datatables nutzlos ist, weil datatables Anrufe define und shim nur für Dateien, die definenicht Anruf tun.
Wenn Sie die Bootstrap Stylings für Datatables verwenden möchten, müssen Sie datatables.bootstrap auf die eine oder andere Weise laden. Das machst du momentan nicht. (Auch wenn das Bündel Sie wurde behoben laden mit RequireJS zu arbeiten, dann würden Sie explizit anfordern datatables.bootstrap irgendwo müssen.)
datatables.bootstrap werden versuchen datatables.net zu laden, anstatt datatables. Sie müssen sich überall auf datatables als datatables.net beziehen, oder Sie können ein map verwenden, wie ich unten tue.

ich gute Ergebnisse zu erzielen, wenn ich sie JavaScript um diese zu ändern:

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(); 
});

Hier ist ein gegabelt fiddle.

Quelle

2017-07-25 16:23:30 Louis

absolut brillante Antwort Sir. Ich benutzte das gleiche Paket (gebaut vom Databasebuilder) für nicht-requireJS-Apps und dachte irgendwie blöd, es würde sogar in einer AMD-Welt funktionieren. Ich habe deine Erklärungen perfekt verstanden. Da ich für die Databases mehr Plugins benötige, habe ich sie separat heruntergeladen und individuell "moduliert". Ich wünschte, ich könnte Ihre Antwort mehrere Male auffrischen! –

Datatables Bootstrap Thema nicht anwendbar bei Verwendung von ReactJS

Antwort

Verwandte Themen