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

无窗口环境

对于无窗口环境(即不在 Web 浏览器中),DataTables CommonJS 软件包均会导出一个工厂函数,该函数可以用两个可选参数执行

  1. 要使用的窗口对象(在无头 CommonJS 环境中,由于 jQuery 要求一个带附加文档的窗口,因此需要将其作为要求)。如果没有提供参数,或者参数为 falsy,则使用 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