【DataTable.js】DataTable基础应用

妖狐艹你老母 2023-10-10 21:42 59阅读 0赞

## 一、简介 ##

DataTables是一个功能强大的Javascript库，用于向HTML表中添加交互特性，虽然简单性是整个项目的核心设计原则，但一开始可能会让人望而生畏。然而，采取这些第一步，让DataTables在你的网站上运行实际上是相当直接的，因为你只需要在你的页面中包含两个额外的文件：

> DataTable JavaScript file
> 
> DataTable CSS file

依赖：JQuery 1.7+

## 二、引入 ##

### 2.1 CDN ###

CDN是一个内容分发网络，它有边缘服务器，可以向web浏览器提供极低延迟的媒体文件，当用户从CDN接收文件时，浏览器将缓存它以供重用。这意味着使用相同Javascript库的不同站点可以共享很大的性能改进，因为浏览器不需要为每个站点从不同的服务器下载相同的文件。

当然也可以将文件下载到本地，引入本地的文件，例如：

### 2.2 npm/Node.js ###

datatable及其扩展可以作为NPM包获得。包的基本名称是datatable .net，扩展和样式集成选项可以作为单独的包获得——有关可用包的详细信息，请参阅NPM安装指南。

npm i datatables.net-dt

调用

import DataTable from 'datatables.net-dt';
     
    let table = new DataTable('#myTable', {
        
        // config options...
    });

## 三、DataTable ##

### 3.1 Initialising ###

$(document).ready(function() {
        
    	$('#myTable').DataTable()
    })

DataTable通过调用`DataTable()`函数，增强表格的样式和功能。该函数可以拥有一个参数，用于增强表格的功能。

示例：

### 3.2 Data ###

数据是复杂的，所有的数据都是不同的。因此，DataTables具有丰富的选项，可用于配置如何获取要在表中显示的数据，以及如何处理该数据。

在数据表处理数据的方式中，有三个核心概念，我们将在本页详细讨论:

*  处理模式
 *  数据类型
 *  数据源

#### 3.2.1 处理模式 ####

DataTables有两种不同的数据处理模式(排序、搜索等)：

*  客户端处理：完整的数据集预先加载，数据处理在浏览器中完成。
 *  服务器端处理：每次重绘表都会发出一个Ajax请求，只返回每次显示所需的数据。数据处理在服务器端进行。

> 一般在10000行以内的数据，选用客户端处理，预加载数据，若超过10000行，则推荐使用服务器端处理。

#### 3.2.2 数据类型 ####

用于DataTable的主数据源必须始终是一个数组(它在使用DOM源数据时自动创建)。该数组中的每个项将定义要显示的行，DataTables可以使用三种基本Javascript数据类型作为行的数据源：

*  数组
 *  对象
 *  实例

> 数据表可以使用列从这些选项中使用`columns.data`和`columns.render`选项。默认的操作模式是数组，但是对象和实例也很有用，因为它们在处理复杂数据时通常更直观。

##### 3.2.2.1 数组 #####

数组形式是`DataTable`最常用的选项，也是使用最简单的，它要求数组的列要与表格的列数量保持一致。示例：

var data = [
        [
            "Tiger Nixon",
            "System Architect",
            "Edinburgh",
            "5421",
            "2011/04/25",
            "$3,120"
        ],
        [
            "Garrett Winters",
            "Director",
            "Edinburgh",
            "8422",
            "2011/07/25",
            "$5,300"
        ]
    ]

初始化表格

$('#example').DataTable({
        
        data: data
    })

##### 3.2.2.2 对象 #####

对象的直观使用与数组略有不同。如果您积极地通过API处理数据，对象可以使获取特定的数据非常容易，因为您只需要使用属性名，而不必记住数据所在的数组索引(例如data.name，而不是data\[0\])。

对象还可以包含比DataTable显示所需更多的信息，这对于操作数据非常有用(例如，包括对最终用户不可见的数据库主键)。

示例：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
        <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
        <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
        <title>Document</title>
    </head>
    
    <body>
        <table id="example" class="display">
            <thead>
            	<tr>
                	<th>name</th>
                	<th>position</th>
                	<th>salary</th>
                	<th>salary</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    
    	<script>
            $(document).ready(function() {
          
                let data = [
                    {
          
                        "name":       "Tiger Nixon",
                        "position":   "System Architect",
                        "salary":     "$3,120",
                        "start_date": "2011/04/25",
                        "office":     "Edinburgh",
                        "extn":       "5421"
                    },
                    {
          
                        "name":       "Garrett Winters",
                        "position":   "Director",
                        "salary":     "$5,300",
                        "start_date": "2011/07/25",
                        "office":     "Edinburgh",
                        "extn":       "8422"
                    }
                ]
                
                $('#example').DataTable({
          
                    data: data,
                    columns : [
                        {
           data: 'name' },
                        {
           data: 'position' },
                        {
           data: 'salary' },
                        {
           data: 'office' }
                    ]
                })
            })
        </script>
    </body>
    </html>

![464c4cadf4d4464d91b6cb07399fd0b6.png][]

##### 3.2.2.3 实例 #####

让数据表显示来自Javascript对象实例的信息可能非常有用，因为这些实例定义了可用于更新数据的抽象方法。例如，你可能有一个Employee类，或者一个Car类，等等，这取决于你要建模的数据。在数据表中使用实例的方式与使用对象非常相似——只需传入对象并将方法或属性名称指定给`columns.data`为每列的数据。

示例：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
        <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
        <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
        <title>Document</title>
    </head>
    
    <body>
        <table id="example" class="display">
            <thead>
            	<tr>
                	<th>name</th>
                	<th>position</th>
                	<th>salary</th>
                	<th>salary</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    
    	<script>
            $(document).ready(function() {
          
                function Employee ( name, position, salary, office ) {
          
                    this.name = name;
                    this.position = position;
                    this.salary = salary;
                    this._office = office;
    
                    this.office = function () {
          
                        return this._office;
                    }
                }
                
                $('#example').DataTable({
          
                    data: [
                        new Employee( "Tiger Nixon", "System Architect", "$3,120", "Edinburgh" ),
                        new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh" )
                    ],
                    columns : [
                        {
           data: 'name' },
                        {
           data: 'position' },
                        {
           data: 'salary' },
                        {
           data: 'office' }
                    ]
                })
            })
        </script>
    </body>
    </html>

#### 3.2.3 数据源 ####

有了现在定义的处理模式和数据类型的概念，我们可以考虑`DataTables`实际上是如何获得要操作的数据的。DataTables将在表中显示的数据有三个基本来源:

*  DOM
 *  JavaScript
 *  Ajax

##### 3.2.3.1 DOM #####

在DataTable启动去增强表格时，会首先去判断是否存在数据，若存在数据则会抛弃`data`和`ajax`属性传递的数据。同时DataTable也可以配合HTML5的`data-*`属性，自定义属性可以为表格提供排序和搜索的依赖数据。

例如，现有一个时间数据`21st November 2016`，如果想对他进行排序，会自动按字符串进行比较，无法做到按时间排序，所以我们可以为该单元格添加一个`data-order`属性，将时间数据转化为一个易于比较的值例如时间戳`1479686400`，这样再进行排序时就会按`data-order`的值进行排序。

示例：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
        <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
        <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
        <title>Document</title>
    </head>
    
    <body>
        <table id="example" class="display">
            <thead>
            	<tr>
                	<th>name</th>
                	<th>position</th>
                	<th>salary</th>
                	<th>date</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>$1,120</td>
                    <td data-order="1479686400">21st November 2016</td>
                </tr>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>$1,120</td>
                    <td data-order="1483977600">10th January 2017</td>
                </tr>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>$1,120</td>
                    <td data-order="959616000">30th May 2000</td>
                </tr>
            </tbody>
        </table>
    
    	<script>
            $(document).ready(function() {
          
                $('#example').DataTable()
            })
        </script>
    </body>
    </html>

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IxKj8hcN-1684919242937)(assets/image-20230420112953697.png)\]

这里可以看到，再对date字段进行排序时，就会按真实时间进行排序。

> 除了`data-order`属性，支持排序的还有`data-sort`。
> 
> 除此之外，还有支持搜索的`data-search`和`data-filter`，可以用来搜索相关记录。

##### 3.2.3.2 JavaScript #####

可以使用数据初始化选项指示datatable使用给定给它的数据。这些数据可以是数组、对象或实例的形式(见上文)，并且可以从任何你想要的地方获取!只要Javascript可以访问数据，就可以将其发送到数据表。

这个方法在广泛使用DataTables API时特别有用，特别是`row.add()`和`row().remove()`方法可以用于动态地从表中添加和删除数据，同样可以从您希望选择的任何来源添加和删除数据。

##### 3.2.3.3 Ajax #####

Ajax源数据与Javascript源数据非常相似，但datattables将通过Ajax调用为您获取数据。从特定脚本中获取表数据通常非常有用，从而将检索数据的逻辑与显示分离开来。数据表中的Ajax源数据由Ajax选项控制。最简单的形式是将属性值设置为字符串，指向要从中加载数据的URL。

> 预设值（Orthogonal Data）

DataTable可以使用`columns.data`或`columns.render`对数据进行预处理，这里包含了4个属性：

*  `display`：显示值
 *  `sort`：排序值
 *  `filter`：搜索值
 *  `type`：类型检测

例如现在有一下数据：

{
        
        "name":       "Tiger Nixon",
        "position":   "System Architect",
        "start_date": {
        
            "display": "Mon 25th Apr 11",
            "timestamp": "1303682400"
        },
        "office":     "Edinburgh"
    }

针对于字段`start_date`，我们想要它显示`display`的值，而排序时按照`timestamp`的值进行排序，这里就可以用到`columns.render`属性，例如：

$('#example').DataTable({
        
        columns: [
            {
        
                data: 'start_date',
                render: {
        
                    _: 'display',
                    sort: 'timestamp'
                }
    		}
    	]
    })

> 数据渲染（Renderers）

在datatable中使用数据渲染的主要优点是可以修改输出数据而不修改原始数据。`columns.data`可用于获取和设置数据，但设置操作增加了显著的复杂性，建议使用`columns.data`选项仅用于指向数据的原始表示，并允许渲染(columns.render)转换数据。

例如现有一个较长的文本，需要对其进行截断就可以使用`columns.render`的函数形式

$('#example').DataTable({
        
        columns: [
            {
        
                data: 'description',
                render: function(data, type, full) {
        
                    return data.subString(0, 15) + '...'
                }
    		}
    	]
    })

### 3.3 Ajax ###

使用Ajax加载数据的另一个好处是，您可以启用`DataTables`的`deferRender`选项来提高性能——启用该选项后，只在需要在页面上绘制DOM元素时才会创建DOM元素，从而减少数据首次插入表时的初始CPU负载。

示例：

$('#example').DataTable({
        
        ajax: {
        
            url: '/api/myData'
        }
    })

当考虑到数据表的Ajax加载数据时，我们几乎总是指的是JSON有效负载——也就是说，从服务器返回的数据是JSON数据结构。这是因为JSON是从Javascript派生的，因此它很自然地与Javascript库(如datattables)配合得很好。它也是一种紧凑且易于理解的数据格式，已被证明在Javascript世界中非常流行。

数据表可以使用其他数据格式，如XML和YAML，尽管这些格式需要在使用之前转换为Javascript对象表示法(即JSON) -这通常在使用`ajax.dataSrc`中完成。本文的其余部分将只考虑JSON。

`ajax.dataSrc`也可以获取对象结构中想要的数据，例如：

// myData.json
    [
        {
        
            "name": "Tiger Nixon",
            "position": "System Architect",
            "salary": "$320,800",
            "start_date": "2011/04/25",
            "office": "Edinburgh",
            "extn": "5421"
        },
        ...
    ]

$('#myTable').DataTable( {
        
        ajax: {
        
            url: '/api/myData',
            dataSrc: ''
        },
        columns: [ ... ]
    } );

当所需要的数据写在`data`属性中时，可以在`dataSrc`中写明数据源，也可以不写，因为DataTable默认的数据源就是`data`，例如：

// myData.json
    {
        
        "data": [
            {
        
                "name": "Tiger Nixon",
                "position": "System Architect",
                "salary": "$320,800",
                "start_date": "2011/04/25",
                "office": "Edinburgh",
                "extn": "5421"
            },
            ...
        ]
    }

$('#myTable').DataTable( {
        
        ajax: {
        
            url: '/api/myData',
            dataSrc: ''
        	// dataSrc: 'data'
        },
        columns: [ ... ]
    } );

若数据放在其他属性中时，就需要在dataSrc中写明数据源，例如：

// myData.json
    {
        
        "staff": [
            {
        
                "name": "Tiger Nixon",
                "position": "System Architect",
                "salary": "$320,800",
                "start_date": "2011/04/25",
                "office": "Edinburgh",
                "extn": "5421"
            },
            ...
        ]
    }

$('#myTable').DataTable( {
        
        ajax: {
        
            url: '/api/myData',
        	dataSrc: 'staff'
        },
        columns: [ ... ]
    } );

在获取数据源之后，要让数据显示在列的位置，就需要在`columns`中指定每一列的数据。

当数据源为数组时可以使用索引来标注数据出现的列，例如：

// myData.json
    [
        "Tiger Nixon",
        "System Architect",
        "$320,800",
        "2011/04/25",
        "Edinburgh",
        "5421"
    ]

$('#myTable').DataTable( {
        
        ajax: {
         ... },
        columns: [
            {
         data: 0 },
            {
         data: 1 },
            {
         data: 2 },
            {
         data: 3 },
            {
         data: 4 },
            {
         data: 5 }
        ]
    } );

对于一个对象，可以直接获取它的key值，标注所在的列，例如：（略）

对于一个多级的对象结构，在这种情况下，请注意，在嵌套对象中，我们使用点点对象表示法，如`hr.position`访问嵌套数据的位置。有了这个功能，几乎任何JSON数据结构都可以与数据表一起使用。

// myData.json
    {
        
        "name": "Tiger Nixon",
        "hr": {
        
            "position": "System Architect",
            "salary": "$320,800",
            "start_date": "2011/04/25"
        },
        "contact": {
        
            "office": "Edinburgh",
            "extn": "5421"
        }
    }

$('#myTable').DataTable( {
        
        ajax: ...,
        columns: [
            {
         data: 'name' },
            {
         data: 'hr.position' },
            {
         data: 'hr.salary' },
            {
         data: 'hr.state_date' },
            {
         data: 'contact.office' },
            {
         data: 'contact.extn' }
        ]
    } );

### 3.4 Options ###

DataTables的大量选项可用于定制它将向最终用户呈现界面和可用功能的方式。这是通过它的配置选项完成的，这些选项是在初始化时设置的。

这里可以使用`paging`选项控制是否分页，使用`scrollY`控制表格的高度，超过此高度后显示滚动条等等，具体可以查看官方的[配置参考][Link 1]。

示例：

$('#example').DataTable({
        
        paging: false,
        scrollY: 400
    })

这个案例在配置中禁用了分页，并且设置表格高度为400，超过400自动显示滚动条。

#### 3.4.1 Non-jQuery Option ####

在初始化表格时，可以调用`new DataTable()`的构造函数，在第二个参数中进行配置。例如：

new DataTable('#example', {
        
        paging: false,
        scrollY: 400
    })

> 支持：1.11+

#### 3.4.2 HTML5自定义属性 ####

从v1.10.5开始，数据表也可以使用从HTML5 `data-*`属性中读取的初始化选项。这提供了一种直接在HTML中设置选项的机制，而不是使用Javascript(如上所述)。考虑以下表格的例子:

<table data-order='[[ 1, "asc" ]]' data-page-length='25'>
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th data-class-name="priority">Salary</th>
            </tr>
        </thead>
    </table>

当表格在初始化时，会自动读取表格中的`data-*`的属性，并自动添加到配置中，在使用时有两点需要注意：

> jQuery将自动从虚线字符串转换为数据表使用的驼峰大小写表示法(例如使用data-page-length表示pageLength)。

> 如果在属性中使用字符串，则必须将其括在双引号中(因此整个属性都括在单引号中)。由于处理JSON数据，这是jQuery的另一个要求。

#### 3.4.3 默认设置 ####

在使用多个数据表的项目中，将初始化默认值设置为通用值通常是有用的(例如，您可能希望将dom选项设置为通用值，以便所有表获得相同的布局)。这可以使用`$.fn.datatable.defaults`对象来完成。该对象采用与DataTables初始化对象相同的所有参数，但在这种情况下，您将为所有未来的DataTables初始化设置默认值。

示例：

// Disable search and ordering by default
    $.extend( $.fn.dataTable.defaults, {
        
        searching: false,
        ordering:  false
    } );
     
    // For this specific table we are going to enable ordering
    // (searching is still disabled)
    $('#example').DataTable( {
        
        ordering: true
    } );

在这个案例中，默认情况下，排序和搜索都是被禁用的，但在初始化表格时，重写该属性后，也可以重新启用该属性。

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qedXEWUa-1684919242938)(assets/image-20230421110304062.png)\]

#### 3.4.4 扩展 ####

许多DataTables扩展也可以通过DataTables配置对象进行配置，初始化扩展并根据需要进行配置。可用的属性取决于所使用的扩展，必须加载扩展Javascript才能使这些选项生效。

具体查看[DataTable Extensions][]。

### 3.5 API ###

datatable及其扩展有一个广泛的API，可以用来访问表中包含的数据，或者在初始化完成后操作表。DataTables API旨在反映表中数据的结构，以及您通常希望与表交互的方式。因此，API由六个关键区域组成，用于处理表及其数据:

*  Tables
 *  Columns
 *  Rows
 *  Cells
 *  Core
 *  Utilities

这里引入三个概念

*  实例（Instance）：API的实例是单个对象实例，它引用一组特定的DataTable表
 *  结果集（Result Set）：API实例持有的数据。DataTables API实例是类似于数组的，因为它们以与普通Javascript数组相同的方式保存数据(因此可以使用array\[\]表示法访问)，并且具有许多相同的方法可用(例如`sort()`和`push()`)。这与jQuery本质上类似数组的方式非常相似。
 *  上下文（Context）：API实例的上下文描述了API实例链接到的数据表。每个API实例可以引用一个或多个DataTables表，并具有对这些表进行操作的能力。

#### 3.5.1 创建API实例 ####

创建一个API有4种方法：

$( selector ).DataTable();

$( selector ).dataTable().api();

new $.fn.dataTable.Api( selector );

new DataTable( selector, options );

每个结果都是DataTables API对象的一个实例，其中包含选择器在其上下文中找到的表。

这里需要注意的是第一种方法和第二种方法的区别，`$( selector ).DataTable()`返回的是一个API实例，但是`$( selector ).dataTable()`返回的是jQuery对象。

示例：

let table = $('#example').DataTable()
    
    console.log(table)

通过控制台输出结果可以看到该表格的API信息。

当使用`dataTable()`函数时：

let table = $('#example').dataTable()
    
    console.log(table)

![在这里插入图片描述][d5c9c917cbdb45f1a0668b8eb3d6fb82.png]

> 但是jQuery对象可以用于操作表节点，就像使用任何其他jQuery实例一样

#### 3.5.2 连接（Chaining） ####

DataTable的大部分API都可以返回相同的API实例，所以如果需要调用多个API，可连接使用，例如：

var table = $('#example').DataTable();
     
    table.search( 'Fiona' ).draw();

DataTables API与jQuery的链接方法不同之处在于，DataTables使用嵌套的方法和属性。例如`ajax.json()`，`json()`方法是`ajax`属性的子方法。这使得API在如何访问数据方面非常具有表现力，方法与之前调用的方法相关。

例如：

var table = $('#example').DataTable( {
        
        ajax: "data.json"
    } );
     
    table.on( 'xhr', function () {
        
        var json = table.ajax.json();
        alert( json.data.length +' row(s) were loaded' );
    } );

当程序请求成功后，就可以通过`ajax.json()`获取请求数据。

API的所有顶级方法在API的所有嵌套级别上都是可用的。例如方法`draw()`就可以写在所有API方法之后，`table.search( 'Fiona' ).draw()`。

> 并不是每个API都可以返回一个实例，例如`cell().node()`，该方法的返回值是一个`td`或者`tr`元素。具体的可以查看[DataTable API Reference][]

### 3.6 Style ###

以适合您设计的方式对DataTables增强表进行样式设置是很重要的，这样表就可以无缝地与您的站点/应用程序的其余部分相匹配。为此，DataTables提供了许多表样式设置选项，从默认的DataTables样式表(具有许多内置可选功能)到与一些最广泛使用的CSS框架集成。

#### 3.6.1 Bootstrap 5 ####

Bootstrap 5是下一的CSS框架，它可以让您快速轻松地构建具有统一外观和感觉的用户界面。DataTables提供了与Bootstrap 5的完全集成，因此您的DataTables将与您站点的其他部分匹配相同的外观和感觉。

这里需要引入以下文件获取支持

> https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css
> 
> https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css
> 
> https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js

根据[Bootstrap 5][]的开发文档，可以对表格样式进行增强。示例：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css">
        <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
        <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
        <title>Document</title>
    </head>
    
    <body>
        <table id="example" class="table table-striped table-bordered" style="width:100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
        </table>
    	<script>
            $(document).ready(function() {
          
                let table = $('#example').DataTable({
          
                    ajax: {
          
                        url: 'data.json'
                    },
                    columns: [
                        {
           data: 'name' },
                        {
           data: 'position' },
                        {
           data: 'office' },
                        {
           data: 'extn' },
                        {
           data: 'start_date' },
                        {
           data: 'salary' },
                    ],
                })
    
            })
        </script>
    </body>
    </html>

### 3.7 Events ###

了解DataTables或它的一个扩展何时执行了特定操作(例如绘制页面)通常是有用的，这样就可以更新其他相关元素以考虑更改。为了提供这种能力，DataTables将触发自定义DOM事件，这些事件可以被监听，然后使用on()方法或jQuery的on()方法进行操作。DataTables的自定义事件的工作方式与标准DOM事件完全相同，并允许事件驱动的操作，这对插件特别有用。

有关DataTables及其扩展将触发的事件的完整列表，请参阅[事件参考文档][Link 2]。

#### 3.7.1 监听事件 ####

如上所述，您可以使用`on()`或jQuery的`on()`方法来监听事件。`on()`的工作方式与`$().on()`完全相同，提供了名称空间和多个事件。

> Datatable的所有事件都是以`dt`为命名空间来触发的。这样做主要是为了防止与Javascript的命名空间冲突。
> 
> 如果使用的是`on()`API，那么会自动为事件追加`dt`的命名空间。

示例：

var table = $('#example').DataTable();
     
    table.on( 'draw', function () {
        
        alert( 'Table redrawn' );
    } );

或者也可以写成

$('#example').on( 'draw.dt', function () {
        
        alert( 'Table redraw' );
    } );

两种写法都可以实现相同的效果，在这个案例中，jQuery的`on()`方法，是必须在命名空间后追加`dt`的。

#### 3.7.2 移除事件 ####

我们可以通过`on()`方法为DataTable添加事件，也可以调用`off()`或者jQuery的`$().off()`方法移除事件。如果是单一的事件触发，可以使用`one()`或者是`$().one()`方法，该事件就会在触发一次后移除该事件。

#### 3.7.3 事件冒泡 ####

与典型的DOM事件一样，DataTables自定义事件会在文档中冒泡出现，因此您可以使用`$().on()`的委托形式或在DOM树中更高位置的其他元素侦听事件。

[464c4cadf4d4464d91b6cb07399fd0b6.png]: https://img-blog.csdnimg.cn/464c4cadf4d4464d91b6cb07399fd0b6.png
[Link 1]: https://datatables.net/reference/option/
[DataTable Extensions]: https://datatables.net/extensions/index
[d5c9c917cbdb45f1a0668b8eb3d6fb82.png]: https://img-blog.csdnimg.cn/d5c9c917cbdb45f1a0668b8eb3d6fb82.png
[DataTable API Reference]: https://datatables.net/reference/api
[Bootstrap 5]: https://getbootstrap.com/docs/5.3/getting-started/introduction/
[Link 2]: https://datatables.net/reference/event