Таблицы данных, пытающиеся получить доступ datatables.net.js с RequireJS

Я пытаюсь настроить DataTables для работы с 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/



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



Сценарий.js: 



define(['jquery','datatables'], function($) {

    $('#example').DataTable();

});


Главная.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']);


Индекс.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: не удается прочитать свойство 'defaults' из undefined][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>
653   3  

3 ответов:

Я решил задачу следующим образом: 

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

        });
    });
});

14  
2015-11-17 05:46:53

Изменен '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']
        }
    }
});
10  
2015-11-17 15:23:49

Мне удалось зарегистрировать имена модулей" .net " в качестве псевдонимов в свойстве 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'
      }
    }
});
8  
2016-11-30 22:09:35

Comments

    Ничего не найдено.
Click here to cancel reply.