NPM 套件

DataTables 及其擴充套件可作為 NPM 套件使用。

由於 DataTables 支援多種樣式框架,每個函式庫(DataTables 及其每個擴充套件)都分為獨立的套件,分別用於函式庫的核心軟體及其樣式。 因此,您需要安裝一個用於函式庫核心軟體的套件,再加上一個樣式套件,才能使其正常運作並正確設定樣式。

DataTables 及其隨附套件將原生支援 ES 模組CommonJS

ES 模組載入器

若要在現代 ES 模組環境中使用 DataTables 及其擴充套件,請安裝您需要的套件(如下所示),然後在您的套件中使用每個套件的 import 陳述式將它們包含進來。

import DataTable from 'datatables.net-dt';
import 'datatables.net-buttons-dt';
import 'datatables.net-responsive-dt';

// DataTables initialisation
let table - new DataTable('#myTable', {
    // ... configuration options
});

按鈕的特別注意事項 - 預設情況下僅提供基本按鈕 - 如果您希望使用所有按鈕,則需要載入一些額外的檔案。

import JSZip from 'jszip'; // For Excel export
import PDFMake from 'pdfmake'; // For PDF export

import 'datatables.net-buttons/js/buttons.html5.mjs';
import 'datatables.net-buttons/js/buttons.print.mjs';
import 'datatables.net-buttons/js/buttons.colVis.mjs';

DataTable.Buttons.jszip(JSZip);
DataTable.Buttons.pdfMake(PDFMake);

CommonJS 載入器

除了 ES 模組之外,這些套件也都支援 CommonJS 載入器(例如較舊版本的 WebPack 或 Node.js)。例如:

var $       = require( 'jquery' );
var dt      = require( 'datatables.net-dt' );
var buttons = require( 'datatables.net-buttons-dt' );

按鈕的特別注意事項 - 使用 require('datatables.net-buttons'); 將僅包含基本的按鈕函式庫,而不包含按鈕定義(例如欄位可見性、檔案匯出和列印檢視)。 可以選擇使用以下方式包含這些按鈕定義檔案:

const JSZip = require('jszip');
const pdfMake = require('pdfmake);

require( 'datatables.net-buttons/js/buttons.colVis.js' ); # Column visibility
require( 'datatables.net-buttons/js/buttons.html5.js' );  # HTML 5 file export
require( 'datatables.net-buttons/js/buttons.print.js' );  # Print view button

無視窗環境

對於無視窗環境(即不在網頁瀏覽器中),DataTables CommonJS 套件都會匯出一個工廠函式,可以使用兩個可選參數執行該函式。

  1. 要使用的視窗物件 (這是必要的,因為在無頭 CommonJS 環境中的 jQuery 可能需要附加了文件的視窗)。如果未提供參數,或參數為虛值,將使用 window
  2. DataTables 應該附加到的 jQuery 物件。 如果未提供參數,套件將執行自己的 require('jquery') 以包含 jQuery。
var $       = require( 'jquery' )( window );
var dt      = require( 'datatables.net-dt' )( window, $ );
var buttons = require( 'datatables.net-buttons-dt' )( window, $ );

NPM 套件安裝

從下面的按鈕中選擇您要使用的樣式框架。



可以安裝以下套件用於 DataTables 核心及其擴充套件。

# DataTables core
npm install datatables.net-dt

# AutoFill
npm install datatables.net-autofill-dt

# Buttons
npm install datatables.net-buttons-dt

# ColReorder
npm install datatables.net-colreorder-dt

# FixedColumns
npm install datatables.net-fixedcolumns-dt

# FixedHeader
npm install datatables.net-fixedheader-dt

# KeyTable
npm install datatables.net-keytable-dt

# RowGroup
npm install datatables.net-rowgroup-dt

# RowReorder
npm install datatables.net-rowreorder-dt

# Responsive
npm install datatables.net-responsive-dt

# Scroller
npm install datatables.net-scroller-dt

# SearchBuilder
npm install datatables.net-searchbuilder-dt

# SearchPanes
npm install datatables.net-searchpanes-dt

# Select
npm install datatables.net-select-dt

# StateRestore
npm install datatables.net-staterestore-dt