Le thème d’amorçage de données ne s’applique pas lors de l’utilisation de ReactJS

Je suis assez nouveau sur RequireJS, alors s’il vous plaît, soyez gentil!

Ci-dessous, un lien avec HTML et JS. Si vous l’exécutez, vous verrez que le datatable est initialisé correctement, mais il n’applique pas le thème bootstrap.

Lien avec problème:

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

Qu’est-ce que je fais mal?

Ci-dessous, mon JS (au cas où le violon ne marche pas):

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 ssortingct'; $('#example').dataTable(); }); 

HTML:

        ... 
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800

    Ce que vous essayez de faire pose plusieurs problèmes:

    1. Le fichier que vous utilisez pour les datatables de datatables dans les paths ressemble à un paquet de modules AMD anonymes concaténés. Un module anonyme est un module pour lequel l’appel de define ne define pas le nom du module. Ces modules reçoivent leur nom de module de l’appel require qui a initié leur chargement. Vous ne pouvez pas simplement concaténer des modules anonymes pour en faire un paquet. Les appels à define doivent également être modifiés pour append le nom du module en tant que premier argument de l’appel define . Ce fichier peut être utile pour les personnes qui n’utilisent aucun chargeur de module, mais vous ne pouvez pas l’utiliser avec RequireJS.

      Vous devez donc configurer des paths distincts pour datatables et datatables.bootstrap .

    2. Votre shim pour datatables est inutile car les appels datatables et shim ne concerne que les fichiers datatables pas define .

    3. Si vous souhaitez utiliser les styles Bootstrap pour Datatables, vous devez charger datatables.bootstrap une manière ou d’une autre. Vous ne le faites pas actuellement. (Même si le paquet que vous avez chargé a été corrigé pour fonctionner avec RequireJS, vous devez explicitement demander quelque part datatables.bootstrap .)

    4. datatables.bootstrap essaiera de charger datatables.net plutôt que datatables . Vous devez référencer les datatables comme datatables.net partout ou vous pouvez utiliser une map comme je le fais ci-dessous.

    J’obtiens des résultats corrects si je modifie votre JavaScript pour ceci:

     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 ssortingct'; $('#example').dataTable(); }); 

    Voici un violon fourchu.