ColReorder Plugin fails with RequireJS optimizer

ColReorder Plugin fails with RequireJS optimizer

rvd1900rvd1900 Posts: 1Questions: 1Answers: 0

I love datatables!!!! It is a great extension to jQuery.

Although I am pulling my hair out trying to figure out why I am getting the error:
"TypeError: $.fn.dataTableExt is undefined
$.fn.dataTableExt.oApi.fnColReorder = function ( oSettings, iFrom, iTo )"

when I optimize my javascript code with RequireJS' r.js.

The code works fine when each file is separated out. The app fails to load with the above error using the combined javascript file created from the command : "node r.js -o ./example.requirejs.config.js"

I have create a simple application to demonstrate the issue. Any help would be appreciated:

Separated files: Datatable debug code: ijemob
Combined files: Datatable debug error: DataTables is not available on this page. (I suspect due to the error above).

Directory Structure:

home
   |
   --index.html
   |
   --build
         |
         --example.requirejs.config.js
         --r.js
   |
   --scripts
          |
          --Example.js
          --jquery.dataTables.js
          --jquery-1.11.1.js
          --dataTables.colReorder.js

HTML:

<!doctype html>
<html lang="en">
<body>
    <table id="example" border="1">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Middle Name</th>
                <th>Last Name</th>
                <th>Nick Name</th>
            </tr>
        </thead>
            <tr><td>John</td><td></td><td>Walton</td><td>John-Boy</td></tr>
            <tr><td>Olivia</td><td></td><td>Walton</td><td>Mom</td></tr>
            <tr><td>Mary</td><td>Ellen</td><td>Walton</td><td>Ellie</td></tr>
            <tr><td>James</td><td>Robert</td><td>Walton</td><td>Jim-Bob</td></tr>
        <tbody>
        </tbody>
    </table>
    <script data-main="scripts/Example" src="scripts/require.js"></script>
</body>
</html>

Example.js:

    requirejs.config({
        baseUrl: 'scripts',
        paths: {
            jquery:       './jquery-1.11.1',
            datatables:   './jquery.dataTables',
            reorder:      './dataTables.colReorder'
        },
        shim: {
            reorder: {
                deps: ['datatables']
            }
        }
    });
    require( [
        'jquery',
        'datatables',
        'reorder'
    ], function($) {
        var table = $('#example').DataTable({
            dom: 'tR'
        });
        var colReorder = new $.fn.dataTable.ColReorder(table);
    });

requireJS optimization configuration file:

    ({
        mainConfigFile: '../scripts/Example.js',
        baseUrl: '../scripts',
        name: 'Example',
        out: '../Example-requireJs.js',
        optimize: 'none', 
        paths: {
            "env": "empty:"
        }
    })
This discussion has been closed.