API 外掛程式

對於開發人員而言，與 DataTables 最常見的互動之一（當然除了表格的初始化之外！）就是使用提供的 API 方法。雖然允許廣泛的程式碼互動，但透過使用下面提供的功能，可以大大增強預設的 API，以適合您的應用程式。

如何使用

若要使用下方其中一個外掛 API 函數，您只需在載入 DataTables 函式庫之後，但在初始化 DataTable 之前，將其包含在您頁面可用的 JavaScript 中即可。

瀏覽器

在瀏覽器中直接載入 API 外掛程式，只需載入該外掛程式的 JavaScript 即可。例如，以下程式碼使用了 sum()（儲存至檔案中）

<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="sum().js"></script>
<script type="text/javascript">
    var table = new DataTable('#myTable');

    document
        .getElementById('button')
        .addEventListener('click', function () {
            alert('Column 4 total: ' + table.column(4).data().sum());
        });

    // or jQuery style:
    var table = $('#example').DataTable();

    $('#button').on('click', function () {
        alert('Column 4 total: ' + table.column(4).data().sum());
    });
</script>

可以在瀏覽器中包含的外掛程式可在我們的 CDN 上取得。請參閱每個外掛程式的詳細資訊頁面，以取得完整的 CDN URL。

ES 模組

API 外掛程式也可以作為 ES 模組使用，可以從 datatables.net-plugins 套件 (.mjs 檔案) 載入。您需要包含該外掛程式所需的檔案。以下我們再次使用 sum() 的範例。

import DataTable from 'datatables.net';
import 'datatables.net-plugins/api/sum().mjs';

var table = new DataTable('#myTable');

document
    .getElementById('button')
    .addEventListener('click', function () {
        alert('Column 4 total: ' + table.column(4).data().sum());
    });

CommonJS

如果您使用 CommonJS (例如，在舊版的 Node 或 Webpack 中)，則可以載入 .js 檔案，它會自動將該外掛程式新增至 DataTables。與 DataTables 核心和擴充功能一樣，CommonJS 載入器會提供一個函式，您需要使用 window 和 $/jQuery 物件呼叫它 - 例如。

var $ = require('jquery');
var DataTable = require('datatables.net')(window, $);
require('datatables.net-plugins/api/sum().js')(window, $);

外掛程式方法


sum()	計算資料集中的值總和。
average()	計算資料集中的值平均值。
column().searchable()	透過 columns() API 方法應用多欄排序。
column().title()	取得欄位的標題
columns().order()	透過 columns() API 方法應用多欄排序。
order.neutral()	將表格的排序變更為其資料載入順序
page.jumpToData()	透過搜尋欄位中的資料跳轉到頁面
processing()	透過 API 顯示/隱藏處理指示器
row().show()	透過顯示正確的分頁頁面，在資料表中顯示該列
rows().generate()	為尚未建立節點的列建立 tr 元素。

API 外掛程式

如何使用

瀏覽器

ES 模組

CommonJS

更多資訊

外掛程式方法

DataTables