javascript - examples - jquery table example
DataTables que intentan acceder a datatables.net.js con RequireJS (3)
Estoy intentando configurar DataTables para que funcione con RequireJS y mi configuración siempre produce este error:
require.js:1926 GET https://preview.c9users.io/{username}/{workspace}/lib/datatables.net.js
Uncaught Error: Script error for: datatables.net
Mi lib/DataTables/* (incluidos todos los módulos) y lib/requirejs.js necesitan ser almacenados localmente en la carpeta lib , así que no entiendo por qué está intentando acceder al archivo datatables.net.js , como ninguna de estas cadenas se menciona en ninguno de los archivos de configuración.
JSFiddle (editado con el propósito de JSFiddle): http://jsfiddle.net/42ucpwee/1/
¿Mi configuración es incorrecta o cuál puede ser la causa del error?
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>
Parece que me ha movido un poco hacia adelante, ahora tengo datatables.js:93165 Uncaught TypeError: Cannot read property ''defaults'' of undefined .
Enlace a la pregunta: [DataTables + RequireJS: no se puede leer la propiedad ''predeterminada'' de undefined] [1]
Algunos módulos funcionaron de la forma en que los describió, pero quizás también se trate del orden en que se importaron. Aquí está el pedido completo como se describe en su sitio 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>
Cambié ''datatables'' por ''datatables.net'' , para satisfacer los requisitos de nombres en los scripts propios de DataTables: define( [''jquery'', ''datatables.net''], function ( $ ) { ... Estoy tratando de poner juntos, un archivo de configuración para RequireJS y mi versión más reciente se ve así:
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'']
}
}
});
Me funcionó registrar los nombres de los módulos ".net" como alias en la propiedad shim config map:
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''
}
}
});
Resolví el problema, así:
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"
}
});
Y la página 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());
});
});
});
});