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

若要從我們的 CDN 將 DataTables 與 RequireJS 一起使用，請在您的頁面中載入以下內容以及 RequireJS，這將為您註冊所有必需的路徑。這樣一來，您就可以使用與我們的 NPM 套件相同的命名慣例的 require()。

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

此正在執行的範例可在此處取得。

DataTables 與 FixedHeader 和 Bootstrap 5 樣式

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

包含列印按鈕的按鈕

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