Styling Datatables with JQueryUI using Require.js

gabalmat_csg

Has anyone had success implementing JQueryUI when loading DataTables using Require.js? I just recently switched my application to load modules using requirejs and I lost my styling on the datatable. I was successfully styling the table before I switched to require by simply placing the JQueryUI css tag before the DataTables css tag in my html file. I haven't changed my css tags, but I have lost the styling. Any help or hints are much appreciated.

allan

How are you loading the jQuery UI styling integration for DataTables (both the CSS and JS which are both required)? Can you show use the RequireJS configure you are using?

Allan

gabalmat_csg

I load the css files in the html file in the following order:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/pepper-grinder/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css"/>

My require config looks like this

paths: {
        "datatables": "https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min",
        "autoFill": "https://cdn.datatables.net/autofill/2.0.0/js/dataTables.autoFill.min",
        "buttons": "https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min",
        "colVis": "https://cdn.datatables.net/buttons/1.0.3/js/buttons.colVis.min",
        "flash": "https://cdn.datatables.net/buttons/1.0.3/js/buttons.flash.min",
        "html5": "https://cdn.datatables.net/buttons/1.0.3/js/buttons.html5.min",
        "print": "https://cdn.datatables.net/buttons/1.0.3/js/buttons.print.min",
        "colReorder": "https://cdn.datatables.net/colreorder/1.2.0/js/dataTables.colReorder.min",
        "fixedColumns": "https://cdn.datatables.net/fixedcolumns/3.1.0/js/dataTables.fixedColumns.min",
        "fixedHeader": "https://cdn.datatables.net/fixedheader/3.0.0/js/dataTables.fixedHeader.min",
        "responsive": "https://cdn.datatables.net/responsive/1.0.7/js/dataTables.responsive.min",
        "rowReorder": "https://cdn.datatables.net/rowreorder/1.0.0/js/dataTables.rowReorder.min",
        "scroller": "https://cdn.datatables.net/scroller/1.3.0/js/dataTables.scroller.min",
        "select": "https://cdn.datatables.net/select/1.0.1/js/dataTables.select.min",
        //End datatable modules
        "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min",
        "jqueryui": "https://code.jquery.com/ui/1.11.4/jquery-ui.min"
},
shim: {
        "jqueryui": ["jquery"],
        "dataTables": ["jqueryui"]
}

I loaded the modules separately because that was the only way I could load the library without an error using require.js. I didn't include the datatables jqueryui files because I didn't think you have to if you are already loading the library. Is that correct? Thanks so much for your help.

allan

I didn't include the datatables jqueryui files because I didn't think you have to if you are already loading the library. Is that correct?

You need to include the integration files as they have the required classes and behaviours to DataTables for jQuery UI styling.

If you load the CDN index page and click the "jQuery UI" button, it will show all the required files.

Note that the integration files and the extensions all refer to datatables.net as an AMD dependancy in the latest versions.

Allan

gabalmat_csg

Thank you so much. I added the required integration files and that fixed it.