DataTable che tentano di accedere datatables.net.js con RequireJS

Sto cercando di configurare DataTable per lavorare con RequireJS e la mia configurazione si traduce sempre in questo errore:DataTable che tentano di accedere datatables.net.js con RequireJS

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

miei lib/DataTables/* (inclusa tutti i moduli.) E lib/requirejs.js entrambi devono essere memorizzati localmente nella cartella lib, quindi non capisco perché sta tentando di accedere al file datatables.net.js, in quanto nessuna di tali stringhe è menzionata in nessuno dei file di configurazione.

JSFiddle (modificato al fine di JSFiddle): http://jsfiddle.net/42ucpwee/1/

è la mia configurazione sbagliata o che cosa può essere la causa dell'errore?

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>

Mi sembra essersi spostato un po 'in avanti, ora io' m avendo datatables.js:93165 Uncaught TypeError: Cannot read property 'defaults' of undefined.

Link domanda: [DataTables + RequireJS: Impossibile leggere 'default' di proprietà di indefinito] [1]

Alcuni moduli hanno lavorato il modo in cui hai descritto altri no, forse è anche circa l'ordine in cui essi sono importati Ecco l'ordine completo come descritto sul loro sito 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>

fonte

2015-11-15 Peter Gerhat

Modificato 'datatables'-'datatables.net', per soddisfare i requisiti di denominazione in DataTable script: define(['jquery', 'datatables.net'], function ($) { .... Sto cercando di mettere insieme un file di configurazione per il RequireJS e la mia nuova versione si presenta in questo modo:

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'] 
     } 
    } 
});

fonte

2015-11-16 09:41:29

Non c'è 'datatables.min.js' in DataTables 1.10.10. Quindi la seguente riga in 'paths' non sembra corretta:' 'DataBase': 'DataTables/datatables.min', '. Inoltre, non è corretto avere 'shim' per i moduli che chiamano' define'. chiamate jQuery definire. Quindi niente "shim" per questo. – Louis

ho risolto il problema, in questo modo:

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

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

     }); 
    }); 
});

fonte

2015-11-17 03:46:53 shineJaie

Interessante come hai fatto a farlo funzionare, ha funzionato anche per me. Mi aspettavo che la soluzione fosse come impostare il percorso alla radice 'datatables.min.js' nella cartella' DataTables' di root. Esistono delle dipendenze 'RequireJS' in quel file' 'datatables', 'datatables.net', 'datatables.net-bs', 'datatables.net-autofill', 'datatables.net-editor', 'datatables-editor-bootstrap ',' datatables.net-buttons''. Ma la cosa principale è che funzioni! –

ha funzionato per me per registrare i nomi dei moduli ".net" come alias sotto la mappa property spessore config :

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

fonte

2016-11-30 20:09:35

DataTable che tentano di accedere datatables.net.js con RequireJS

risposta

Problemi correlati