Require.js

DataTables及其扩展可以使用以下AMD加载程序：RequireJS。我们提供了以下脚本，方便您使用RequireJS加载我们的软件。请注意：这些文件托管在我们的CDN上，但如果您希望使用其他CDN（例如CDNJS）或您自己的服务器，只需更换URL即可。

在使用 RequireJS 时需要记住的一点是，如果没有外部插件，它对 CSS 无效。要使用我们提供的样式表，您需要从我们的下载构建器加载它们或手动包含它们。

基本用法

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

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

RequireJS + DataTables CDN

要使用 RequireJS 从我们的 CDN 使用 DataTables，请将以下内容与 RequireJS 一起加载到您的页面上，这将为您注册所有必需的路径。然后，您可以使用以下命名约定使用 require()：NPM 软件包。

(function(){

var cdnBase = 'https://cdn.datatables.net';
var extensions = [
    {n: 'autofill', v: '2.7.0'},
    {n: 'buttons', v: '3.1.2'},
    {n: 'fixedcolumns', v: '5.0.3'},
    {n: 'fixedheader', v: '4.0.1'},
    {n: 'keytable', v: '2.12.1'},
    {n: 'responsive', v: '3.0.3'},
    {n: 'rowgroup', v: '1.5.0'},
    {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/dataTables.min',
    'datatables.net-buttons-print': cdnBase + '/buttons/3.1.2/js/buttons.print.min',
    'datatables.net-buttons-html5': cdnBase + '/buttons/3.1.2/js/buttons.html5.min',
    'datatables.net-buttons-colvis': cdnBase + '/buttons/3.1.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.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
});

})();

示例

只使用 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>

此示例正在运行，可在此处获取。

使用 FixedHeader 和 Bootstrap 5 样式的 DataTables

<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>

请注意 -bs5 的用法，用来指明要为其加载集成的样式库（您仍然需要自行加载 Bootstrap 5）。

带有 Print 按钮的按钮

<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>