Require.js

DataTables and its extensions can be used via an AMD loader such as RequireJS. We provide the script below to make it easy to load our software with RequireJS. Note that the files are hosted on our CDN, but if you prefer to use another such as CDNJS or your own server, just swap the URLs out.

One thing to keep in mind when using RequireJS is that it doesn't help with CSS without external plug-ins. To use our provided style sheets you'll need to either load them from our download builder or include them manually.

Basic use

require.config( {
    paths: {
        'datatables.net': 'path/to/dataTables.min',
        'jquery': 'path/to/jquery',
    }
} );

require( ['jquery', 'datatables.net'], function ($, dt) {
    $('#myTable').DataTable();
} );

RequireJS + DataTables CDN

To use DataTables from our CDN with RequireJS, load the following on your page along with RequireJS, which will register all the required paths for you. You will then be able to use a require() with the same naming conventions as our NPM packages.

(function(){

var cdnBase = 'https://cdn.datatables.net';
var extensions = [
    {n: 'autofill', v: '2.7.0'},
    {n: 'buttons', v: '3.0.2'},
    {n: 'fixedcolumns', v: '5.0.0'},
    {n: 'fixedheader', v: '4.0.1'},
    {n: 'keytable', v: '2.12.0'},
    {n: 'responsive', v: '3.0.2'},
    {n: 'rowgroup', v: '1.5.0'},
    {n: 'rowreorder', v: '1.5.0'},
    {n: 'scroller', v: '2.4.1'},
    {n: 'searchbuilder', v: '1.7.1'},
    {n: 'searchpanes', v: '2.3.1'},
    {n: 'select', v: '2.0.1'},
    {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.0.5/js/dataTables.min',
    'datatables.net-buttons-print': cdnBase + '/buttons/3.0.2/js/buttons.print.min',
    'datatables.net-buttons-html5': cdnBase + '/buttons/3.0.2/js/buttons.html5.min',
    'datatables.net-buttons-colvis': cdnBase + '/buttons/3.0.2/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.0.5/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
});

})();

Examples

Just DataTables:

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<script>
require(
    ['jquery', 'datatables.net'],
    function ($) {
        $('#myTable').DataTable();
    }
)
</script>

This example, running, is available here.

DataTables with FixedHeader and Bootstrap 5 styling:

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<script>
require(
    ['jquery', 'datatables.net-bs5', 'datatables.net-fixedheader-bs5'],
    function ($) {
        $('#myTable').DataTable({
            fixedHeader: true
        });
    }
)
</script>

Note the use of -bs5 to indicate the styling library to load integration for (you still need to load Bootstrap 5 yourself).

Buttons with print button

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<script>
require(
    ['jquery', 'datatables.net', 'datatables.net-buttons', 'datatables.net-buttons-print'],
    function ($) {
        $('#myTable').DataTable({
            dom: 'Bftip',
            buttons: [
                'print'
            ]
        });
    }
)
</script>