RequireJS anyone?

RequireJS is, in web-terms, an old technology now (some might say ancient), but it is still in wide use and there have been a number of questions about RequireJS and DataTables recently. Something I've wanted to do for a long time is create a single definition file that can be used to load in any DataTables extension with whatever styling library you are using. So finally, it is time to dust off the AMD loader skills and get it done!

Loader script

I've created a RequireJS page in the download section which details how to use DataTables and its extensions with RequireJS, and has a script that will build a RequireJS configuration to load DataTables from our CDN - that looks like this:

(function(){

var cdnBase = 'https://cdn.datatables.net';
var extensions = [
    {n: 'autofill', v: '2.7.0'},
    {n: 'buttons', v: '3.2.0'},
    {n: 'fixedcolumns', v: '5.0.4'},
    {n: 'fixedheader', v: '4.0.1'},
    {n: 'keytable', v: '2.12.1'},
    {n: 'responsive', v: '3.0.3'},
    {n: 'rowgroup', v: '1.5.1'},
    {n: 'rowreorder', v: '1.5.0'},
    {n: 'scroller', v: '2.4.3'},
    {n: 'searchbuilder', v: '1.8.1'},
    {n: 'searchpanes', v: '2.3.3'},
    {n: 'select', v: '2.1.0'},
    {n: 'staterestore', v: '1.4.1'}
];

var styles = [
    {s: 'bm', f: 'bulma'},
    {s: 'bs', f: 'bootstrap'},
    {s: 'bs4', f: 'bootstrap4'},
    {s: 'bs5', f: 'bootstrap5'},
    {s: 'dt', f: 'dataTables'},
    {s: 'ju', f: 'jqueryui'},
    {s: 'se', f: 'semanticui'}
];

// Initial paths which aren't included in the automatic path setup
var paths = {
    'datatables.net': cdnBase + '/2.1.8/js/jquery.dataTables.min',
    'datatables.net-buttons-print': cdnBase + '/buttons/3.2.0/js/buttons.print.min',
    'datatables.net-buttons-html5': cdnBase + '/buttons/3.2.0/js/buttons.html5.min',
    'datatables.net-buttons-colvis': cdnBase + '/buttons/3.2.0/js/buttons.colVis.min',
    'jquery': 'https://code.jquery.com/jquery-3.6.0.min'
};

for (var i=0 ; i<styles.length ; i++) {
    paths['datatables.net-' + styles[i].s] =
        cdnBase + '/2.1.8/js/dataTables.' + styles[i].f + '.min';
}

for (var i=0 ; i<extensions.length ; i++) {
    var e = extensions[i];

    paths['datatables.net-' + e.n] =
        cdnBase + '/' + e.n + '/' + e.v + '/js/dataTables.' + e.n + '.min';

    for (var j=0 ; j<styles.length ; j++) {
        var s = styles[j];

        paths['datatables.net-' + e.n + '-' + s.s] = cdnBase + '/' + e.n + '/' + e.v + '/js/' + e.n + '.' + s.f + '.min';
    }
}

require.config({
    paths: paths
});

})();

I could have course have just listed all the files and paths, but scripting it is more compact, easier to maintain and let's be honest, more fun!

Great - let's use it

Use is very simple - load up RequireJS as you'll be used to if you've used it before, include the script from above and then require the modules you need using our NPM naming conventions:

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<script>
// .. Script from above

require(
    ['jquery', 'datatables.net'],
    function ($) {
        $('#myTable').DataTable();
    }
)
</script>

This example, running, is available here.

Show AMD some love

While fully accepting that AMD loading is a legacy technique now, I hope this will be of use to some of you. If so, please let me know - I'll consider putting it up on NPM and our CDN (versioning would probably be tied to the DataTables main release with the possibly of overriding a specific version should there be a release of an extension you need before that DataTables release).

What about ES modules?

DataTables core does how have a module file available for loading as an ES module, and I am looking into how best extend that to the styling integration and extensions. Unfortunately, a key feature we need to not require you to list every single file you want to load, Import Maps is not yet supported in anything other than Chrome based browsers. CSS would remain an issue as well, although this might help when using a package manager.