2015-11-15 2 views
19

Я пытаюсь настроить DataTables для работы с RequireJS и моя конфигурация всегда приводит к ошибке:DataTables пытаются получить доступ к datatables.net.js с RequireJS

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

Мои lib/DataTables/* (вкл. Все модули) и lib/requirejs.js оба должны храниться локально в папке lib, поэтому я не понимаю, почему он пытается получить доступ к файлу datatables.net.js, так как ни одна такая строка не упоминается ни в одном из файлов конфигурации.

JSFiddle (отредактированный для целей JSFiddle): http://jsfiddle.net/42ucpwee/1/

это моя конфигурация неправильно или то, что может быть причиной ошибки?

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> 

кажется, переместили меня немного вперед, теперь я м, имеющего datatables.js:93165 Uncaught TypeError: Cannot read property 'defaults' of undefined.

Ссылка на вопрос: [DataTables + RequireJS: Не удается прочитать свойство «по умолчанию» неопределенных] [1]

Некоторые модули работали так, как вы описали некоторые из них не сделал, может быть, это также о том порядке, в котором они импортируются. Вот полный порядок, как описано на их сайте:

<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> 

ответ

8

Изменено 'datatables' к 'datatables.net', чтобы удовлетворить требования именования в DataTables собственных скриптов: define(['jquery', 'datatables.net'], function ($) { .... Я пытаюсь собрать конфигурационный файл для RequireJS и моя новая версия выглядит следующим образом:

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

В DataTables нет данных 'datatables.min.js' 1.10.10. Таким образом, следующая строка в 'paths' выглядит не так:' 'datatables': 'DataTables/datatables.min', '. Кроме того, неверно иметь 'shim' для модулей, которые вызывают' define'. Определения jQuery определяют. Так что не 'шайба' для этого. – Louis

14

Я решил проблему, как это:

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

И страницу 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()); 
      }); 

     }); 
    }); 
}); 

+1

Интересно, как вы его работали, это также сработало для меня. Я ожидал, что решение будет похоже на путь к корню 'datatables.min.js' в корневой папке DataTables. Существуют зависимости 'RequireJS' в этом файле' 'datatables', 'datatables.net', 'datatables.net-bs', 'datatables.net-autofill', 'datatables.net-editor', 'datatables-editor-bootstrap ',' datatables.net-buttons''. Но главное, что он работает! –

7

Он работал для меня, чтобы зарегистрировать «.net» имена модулей в качестве псевдонимов при отображении собственности прокладки конфигурации :

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' 
     } 
    } 
}); 
Смежные вопросы