web-dev-qa-db-fra.com

DataTables essayant d'accéder à datatables.net.js avec RequireJS

J'essaie de configurer DataTables pour qu'il fonctionne avec RequireJS et ma configuration entraîne toujours cette erreur:

require.js:1926 GET https://preview.c9users.io/{username}/{workspace}/lib/datatables.net.js
Uncaught Error: Script error for: datatables.net

Ma lib/DataTables/* (y compris tous les modules) et lib/requirejs.js les deux doivent être stockés localement dans le dossier lib, donc je ne comprends pas pourquoi il essaie d'accéder au fichier datatables.net.js, car aucune chaîne de ce type n'est mentionnée dans aucun des fichiers de configuration.

JSFiddle (édité dans le but de JSFiddle): http://jsfiddle.net/42ucpwee/1/

Ma configuration est-elle incorrecte ou quelle peut être la cause de l'erreur?

script.js:

define(['jquery','datatables'], function($) {
    $('#example').DataTable();
});

main.js:

requirejs.config({
    //appDir: "../",
    baseUrl: "lib",
    paths: {
        'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min',
        'bootstrap': '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min',
        /* Error is the same, I can't even use this CDN URL (I need the editor) 
        'datatables': 'https://cdn.datatables.net/s/bs-3.3.5/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.10,af-2.1.0,b-1.1.0,b-colvis-1.1.0,b-flash-1.1.0,b-html5-1.1.0,b-print-1.1.0,cr-1.3.0,fc-3.2.0,fh-3.1.0,kt-2.1.0,r-2.0.0,rr-1.1.0,sc-1.4.0,se-1.1.0/datatables.min',
        */
        'datatables': 'DataTables/datatables',//'DataTables/datatables.min' exactly same error
        'script': '../js/script'
    },
    shim: {
        'bootstrap': {
            deps: ['jquery']
        },
        'jquery': {
            exports: '$'
        },
        'datatables': {
            deps: ['bootstrap','jquery']
        },
        'script': {
            deps: ['jquery','datatables']
        }
    }
});
requirejs(['script']);

index.html:

<html>
<head>
    <link rel="stylesheet" href="https://cdn.datatables.net/s/bs-3.3.5/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.10,af-2.1.0,b-1.1.0,b-colvis-1.1.0,b-flash-1.1.0,b-html5-1.1.0,b-print-1.1.0,cr-1.3.0,fc-3.2.0,fh-3.1.0,kt-2.1.0,r-2.0.0,rr-1.1.0,sc-1.4.0,se-1.1.0/datatables.min.css" type="text/css" />
    <script type="text/javascript" src="js/require.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</head>
<body>
    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Cela semble m'avoir fait avancer un peu, maintenant je vais datatables.js:93165 Uncaught TypeError: Cannot read property 'defaults' of undefined.

Lien vers la question: [DataTables + RequireJS: impossible de lire la propriété "par défaut" non définie] [1]

Certains modules ont fonctionné comme vous l'avez décrit, d'autres non, peut-être s'agit-il également de l'ordre dans lequel ils sont importés. Voici la commande complète telle que décrite sur leur site Web:

<link rel="stylesheet" type="text/css" href="Bootstrap-3.3.5/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="DataTables-1.10.10/css/dataTables.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="AutoFill-2.1.0/css/autoFill.bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="Buttons-1.1.0/css/buttons.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="ColReorder-1.3.0/css/colReorder.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="Editor-1.5.2/css/editor.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="FixedColumns-3.2.0/css/fixedColumns.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="FixedHeader-3.1.0/css/fixedHeader.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="KeyTable-2.1.0/css/keyTable.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="Responsive-2.0.0/css/responsive.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="RowReorder-1.1.0/css/rowReorder.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="Scroller-1.4.0/css/scroller.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="Select-1.1.0/css/select.bootstrap.min.css"/>

<script type="text/javascript" src="jQuery-2.1.4/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="Bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="JSZip-2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="pdfmake-0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript" src="pdfmake-0.1.18/build/vfs_fonts.js"></script>
<script type="text/javascript" src="DataTables-1.10.10/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="DataTables-1.10.10/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="AutoFill-2.1.0/js/dataTables.autoFill.min.js"></script>
<script type="text/javascript" src="AutoFill-2.1.0/js/autoFill.bootstrap.min.js"></script>
<script type="text/javascript" src="Buttons-1.1.0/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="Buttons-1.1.0/js/buttons.bootstrap.min.js"></script>
<script type="text/javascript" src="Buttons-1.1.0/js/buttons.colVis.min.js"></script>
<script type="text/javascript" src="Buttons-1.1.0/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="Buttons-1.1.0/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="Buttons-1.1.0/js/buttons.print.min.js"></script>
<script type="text/javascript" src="ColReorder-1.3.0/js/dataTables.colReorder.min.js"></script>
<script type="text/javascript" src="Editor-1.5.2/js/dataTables.editor.min.js"></script>
<script type="text/javascript" src="Editor-1.5.2/js/editor.bootstrap.min.js"></script>
<script type="text/javascript" src="FixedColumns-3.2.0/js/dataTables.fixedColumns.min.js"></script>
<script type="text/javascript" src="FixedHeader-3.1.0/js/dataTables.fixedHeader.min.js"></script>
<script type="text/javascript" src="KeyTable-2.1.0/js/dataTables.keyTable.min.js"></script>
<script type="text/javascript" src="Responsive-2.0.0/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="Responsive-2.0.0/js/responsive.bootstrap.min.js"></script>
<script type="text/javascript" src="RowReorder-1.1.0/js/dataTables.rowReorder.min.js"></script>
<script type="text/javascript" src="Scroller-1.4.0/js/dataTables.scroller.min.js"></script>
<script type="text/javascript" src="Select-1.1.0/js/dataTables.select.min.js"></script>
javascriptjqueryrequirejsdatatablesdatatables-1.10
20
Peter G.

'datatables' A été remplacé par 'datatables.net', Afin de satisfaire aux exigences de dénomination dans les propres scripts DataTables: define( ['jquery', 'datatables.net'], function ( $ ) { .... J'essaie de créer un fichier de configuration pour RequireJS et ma dernière version ressemble à ceci:

requirejs.config({
    paths: {
        'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min',
        'jquery-ui': '//code.jquery.com/ui/1.11.4/jquery-ui',
        'bootstrap': '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min',

        //DataTables core
        'datatables' : 'DataTables/datatables.min',
        'datatables.net' : 'DataTables/DataTables-1.10.10/js/jquery.dataTables.min',
        'datatables.net-bs' : 'DataTables/DataTables-1.10.10/js/dataTables.bootstrap.min',

        //Dependencies
        'datatables.net-autofill' : 'DataTables/AutoFill-2.1.0/js/dataTables.autoFill.min',
        'datatables.net-editor' : "DataTables/Editor-1.5.2/js/dataTables.editor.min",
        'datatables-editor-bootstrap' : "DataTables/Editor-1.5.2/js/editor.bootstrap.min",
        'datatables.net-buttons' : 'DataTables/Buttons-1.1.0/js/dataTables.buttons.min',
        //'datatables.net-buttons' : 'DataTables/Buttons-1.1.0/js/buttons.bootstrap.min',

        //Extra modules
        'datatables.net-buttons-bs' : 'DataTables/Buttons-1.1.0/js/buttons.bootstrap.min',
        'datatables.net-colreorder' : "DataTables/ColReorder-1.3.0/js/dataTables.colReorder.min",
        'datatables.net-rowreorder' : "DataTables/RowReorder-1.1.0/js/dataTables.rowReorder.min",
        'datatables.net-scroller' : "DataTables/Scroller-1.4.0/js/dataTables.scroller.min",
        'datatables.net-select' : "DataTables/Select-1.1.0/js/dataTables.select.min",

        //some modules are still missing from the full package...
    },
    shim: {
        'jquery' : {
            exports : 'jquery'
        },
        'bootstrap' : {
            deps : [ 'jquery' ],
            exports : 'Bootstrap'
        },
        'datatables' : {
            deps: ['jquery','bootstrap']  
        },
        'script': {
            deps: ['datatables','datatables.net-colreorder','datatables.net-rowreorder','datatables.net-scroller','datatables.net-select']
        }
    }
});
11
Peter G.

J'ai résolu le problème, comme ceci:

    require.config({

    baseUrl: "/MyFrontEnd/resource",

    paths: {
        "jquery": "js/jquery-2.1.4.min",
        "datatables.net": "DataTables-1.10.10/media/js/jquery.dataTables.min",
        "datatables" : "DataTables-1.10.10/media/js/dataTables.bootstrap.min"
        "datatables_select": "DataTables-1.10.10/extensions/Select/js/dataTables.select.min"
    }
});

Et la page HTML:

<script src="../resource`enter code here`/js/require.js"></script>
<script>
require(['/MyFrontEnd/resource/myjs/main.js'], function (main) {
    require(['jquery', 'datatables', 'datatables_select'], function ($, datatables, datatables_select) {
        $(document).ready(function () {
            var table = $('#demo_select').DataTable();
            $('#demo_select').on('click', 'tbody tr', function () {
                if (table.row(this, {selected: true}).any()) {
                    table.row(this).deselect();
                }
                else {
                    table.row(this).select();
                }

                console.log(table.row(this).data());
            });

        });
    });
});
15
shineJaie

Cela a fonctionné pour moi d'enregistrer les noms de module ".net" comme alias sous la propriété de carte de configuration de shim:

require.config({
    paths: {
      jquery: '../libs/jquery-2.2.4',
      dataTables: '../libs/dataTables/jquery.dataTables-1.10.12',
      dataTables_buttons: '../libs/dataTables/dataTables.buttons-1.2.2'
    },
    shim: {
      dataTables: {
        deps: ['jquery']
      },
      dataTables_buttons: {
        deps: ['dataTables']
      }
    },
    map: {
      '*': {
        'datatables.net': 'dataTables',
        'datatables.net-buttons': 'dataTables_buttons'
      }
    }
});
11
g.carey