排序外掛

DataTables 提供了兩個用於表格中資訊排序的 API

基於類型的排序
自訂資料來源排序

到目前為止，這兩種類型中最常用的是「基於類型的排序」，如果您剛開始使用 DataTables，這也是您最可能想要使用的。

基於類型的排序

主要的 DataTables 套件包含字串、日期、數值和貨幣資料的排序功能，但您可能希望以其他方式排序資料，例如未內建的日期格式。下面的排序功能提供了大量不同的排序方法，可用於 DataTables。

還值得注意的是，排序功能與類型偵測外掛密切相關，並且下面許多排序外掛都有相應的類型偵測功能，使安裝非常容易，我們強烈建議採用這種方法。

如何使用

若要使用下面的外掛程式功能來新增排序特定資料類型的能力，您需要在頁面可用的 Javascript 中包含外掛程式的程式碼 - 然後，如果您使用合適的類型偵測外掛程式，新的排序將會自動套用。如果沒有可用的類型偵測外掛程式，您可能需要為目標欄使用 columns.type 參數。

瀏覽器

在瀏覽器中直接載入排序外掛程式，只需載入外掛程式的 Javascript（在您載入核心 DataTables Javascript 之後）。例如，下面的程式碼使用儲存到檔案中的 anti-the 外掛程式

<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.antiThe.js"></script>
<script type="text/javascript">
    var table = new DataTable('#myTable', {
        columnDefs: [
            {
                target: 0,
                type: 'anti-the',
            },
        ],
    });
</script>

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

ES 模組

排序外掛程式也可用作 ES 模組，可以從datatables.net-plugins 套件（.mjs 檔案）載入。您需要包含外掛程式所需的檔案。下面我們再次使用 anti-the 的範例

import DataTable from 'datatables.net';
import 'datatables.net-plugins/sorting/anti-the.mjs';

var table = new DataTable('#myTable', {
    columnDefs: [
        {
            target: 0,
            type: 'anti-the',
        },
    ],
});

CommonJS

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

var $ = require('jquery');
var DataTable = require('datatables.net')(window, $);
require('datatables.net-plugins/sorting/anti-the.js')(window, $);

外掛


區分大小寫	基於資料的大小寫排序，在遞增排序中，大寫字母的優先順序高於小寫字母。
absolute	在排序時，將一個或多個項目保留在表格的頂部和/或底部
alt-string	使用影像標籤的 `alt` 屬性作為排序的資料。
anti-the	如果存在，則在排序時移除前綴詞 `dt-string The`
any-number	依數字排序具有混合數值內容的欄
brackets-negative	偵測具有前置貨幣符號的貨幣類型資料，以及偵測兩種負數格式
chapter	以數字方式排序書籍章節
chinese-string	排序中文字元
currency	當資料具有前置貨幣符號時，依數字排序資料。
czech-string	為捷克進行區域感知排序。
date-dd-MMM-yyyy	以 `dd-mmm-yyyy` 格式排序日期
date-de	以 `dd.mm.YYYY HH:mm` 或 `dd.mm.YYYY` 格式排序日期/時間。
date-eu	以 `dd/mm/YY[YY]` 格式排序日期（帶有可選空格）
date-euro	以 `dd/mm/YYYY hh:ii:ss` 格式排序日期/時間
date-uk	以 `dd/mm/YY` 格式排序日期
datetime-luxon	使用 luxon 排序任何格式的日期和時間
datetime-moment	使用 Moment.js 排序任何格式的日期和時間
diacritics-sort	更好地排序包含重音符號（變音符號）的字串
enum	為 DataTable 動態建立列舉排序選項
farsi-numbers	排序包含 UTF8 波斯數字的欄
file-size	正確排序縮寫的檔案大小（8MB、4KB 等）
formatted-numbers	排序以千位分隔符顯示的數字
intl	使用 Intl Javascript API 排序字串資料
ip-address	依數字排序 IP 位址
monthYear	此排序外掛將依日曆順序排序格式為「MM YY」的資料。請注意，此外掛已棄用。[datetime](//datatables.dev.org.tw/blog/2014-12-18) 外掛程式提供了增強的功能和彈性。
natural-time-delta	排序人類可讀的時間差
natural	依_自然_方式排序數字和字母的混合資料。
nepali-numbers	排序包含 UTF8 尼泊爾數字的欄
novalue	將任何「novalue」模式排序為最大值或最小值（例如，將「-」視為 -1000 或 1000）。
num-html	排序 HTML 和數值資料的混合資料。
numString	排序包含在任何位置的數值，使用正規表示式。
numeric-comma	正確排序使用逗號作為小數位的數字。
percent	排序具有後綴百分比符號的數值資料
persian-number	排序包含 UTF-8 波斯數字的欄
persian	按字母順序排序波斯字串
scientific	排序以指數記數法撰寫的資料。
signed-num	依數值排序具有前導 `+` 符號（以及 `-`）的資料。
stringMonthYear	此排序外掛將依日曆順序排序格式為「MMM yyyy」或「MMMM yyyy」的資料。受到論壇討論的啟發：https://datatables.dev.org.tw/forums/discussion/1242/sorting-dates-with-only-month-and-year 請注意，此外掛已棄用。[datetime](//datatables.dev.org.tw/blog/2014-12-18) 外掛程式提供了增強的功能和彈性。
time-elapsed-dhms	正確排序縮寫的時間跨度（2d 3h、2h 8m、3m 8s、30s 等）
time	以以下格式排序時間：`hh:mm、hh:mm:ss、hh:mm tt、hh:mm:ss tt`
title-numeric	根據空白元素上的屬性，依數字排序資料。
title-string	根據空白元素上的屬性，依字串排序資料。
turkish-string	排序土耳其字元

自訂資料來源排序

自訂資料來源排序外掛程式允許完全控制要排序的資料。通常，這用於在表格排序之前即時從 DOM 擷取資料，以便對最終使用者或其他指令碼可以更新的資料執行排序。

您還可以將基於類型的排序與自訂資料來源排序結合使用，因為自訂資料來源排序外掛程式傳回的資料會以與自動擷取的資料完全相同的方式進行處理。

請注意，自訂資料來源排序外掛程式通常會查詢 DOM 以取得資訊，這可能會降低效能。因此，如果可以讓您使用基於類型的排序（上方）或正交資料，建議您這麼做。

如何使用

若要使用下面的自訂資料來源排序外掛程式，您只需要在載入 DataTables 函式庫之後，但在初始化 DataTable 之前，在您的頁面可用的 Javascript 中包含外掛程式的程式碼。您還需要為欄指定 columns.orderDataType 參數，以告訴它要使用哪個外掛程式功能。

下面的範例顯示了多個自訂資料來源外掛程式的使用，以及它與 columns.type 結合使用的情況 (即時範例)

<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.dataSourcePlugins.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#example').dataTable( {
            "columns": [
                null,
                null,
                { "orderDataType": "dom-text" },
                { "orderDataType": "dom-text", "type": "numeric" },
                { "orderDataType": "dom-select" },
                { "orderDataType": "dom-checkbox" }
            ]
        } );
    } );
</script>

外掛

自訂資料來源功能用於更新 DataTables 中的快取資料，因此排序可以在具有使用者輸入資訊的欄上發生。


dom-checkbox	根據欄中核取方塊的核取狀態排序
dom-select	根據欄中 `dt-tag select` 選項的值排序
dom-text-numeric	根據欄中 `dt-tag input` 元素的值排序。
dom-text	根據欄中 `dt-tag input` 元素的值排序。