渲染器

有時候，表格列的資料來源可能不包含您希望在表格中顯示的值。您可能希望將其轉換為不同的表示形式（例如將時間戳記轉換為人類可讀的格式）、組合資料點（可能是名字和姓氏）或對值執行一些計算（也許是從營業額和費用值計算利潤）。

在 DataTables 的術語中，將原始資料轉換為將在 DataTable 中顯示的值稱為渲染，並使用 columns.render 選項執行。

資料渲染

在 DataTables 中使用資料渲染器的主要優點是，您可以在不修改原始資料的情況下修改輸出資料。columns.data 方法可用於取得和設定資料，但設定操作會增加相當大的複雜性，建議 columns.data 選項僅用於指向資料的原始表示形式，並允許渲染器 (columns.render)（唯讀）轉換資料。

columns.render 可以透過多種不同的方式使用

作為轉換資料的函式
作為從物件中選取資料的字串

函式

使用 columns.render 是最常見的方法，因為它可以完全控制將向最終使用者顯示的資料（這是一個常規的 Javascript 函式，因此您幾乎可以對資料執行任何您想要的操作）。

該函式會傳入三個參數

由 columns.data 指向的資料。如果 columns.data 為 null，則此處將給定 null 值。
DataTables 要求的資料類型 - 這允許函式支援正交資料。
該列的原始完整資料物件或陣列。

從函式傳回的值是 DataTables 將用於所請求資料（顯示、排序、搜尋等）的任何值。

例如，考慮以下包含列資料的資料結構

{
    "product": "Toy car",
    "creator": {
        "firstName": "Fiona",
        "lastName": "White"
    },
    "created": "2015-11-01",
    "price": 19.99,
    "cost": 12.53
}

新增格式

在我們的 DataTable 中，如果我們希望有一個顯示價格的列，通常會希望在前面加上貨幣符號。在這種情況下，我們使用美元符號（另請參閱下面的內建數字渲染器，它提供進階格式設定選項）

{
    data: 'price',
    render: function ( data, type, row ) {
        return '$'+ data;
    }
}

連接字串

在我們的 DataTable 中，如果我們希望有一個顯示建立者全名的單一列，我們可以透過使用以下 columns 定義來連接字串（特別注意，由於使用 columns.data 選項進行分配，create 物件如何作為第一個參數傳入）

{
    data: 'creator',
    render: function ( data, type, row ) {
        return data.firstName +' '+ data.lastName;
    }
}

轉換資料

對於另一個列，我們希望顯示 created 值，但使用美國標準 MM-DD-YYYY 格式設定格式。這可以透過分割字串並重新排列組成部分來簡單地完成。我們也希望日期是可排序的，並且由於 DataTables 內建支援 ISO8601 格式化字串（原始格式），因此我們希望僅針對 display 和 filter 資料類型執行轉換 - 請參閱正交資料以瞭解更多資訊）

{
    data: 'created',
    render: function ( data, type, row ) {
        var dateSplit = data.split('-');
        return type === "display" || type === "filter" ?
            dateSplit[1] +'-'+ dateSplit[2] +'-'+ dateSplit[0] :
            data;
    }
}

計算值

最後，要從 price 和 cost 欄位建立利潤列，我們可以使用函式來計算所需的值 - 請注意，在這種情況下，columns.data 為 null - 因此，傳遞到 columns.render 方法的第一個參數也是 null，但第三個參數可以存取原始資料來源物件，因此我們可以繼續從那裡使用資料

{
    data: null,
    render: function ( data, type, row ) {
        return Math.round( ( row.price - row.cost ) / row.price * 100 )+'%';
    }
}

字串

格式化程式的一個不太常見的選項是使用字串來簡單地指向表格中應該使用的資料。這類似於 columns.data 的常用方式，但請記住，渲染器只能存取由 columns.data 指向的資料，而不是整列。

繼續使用上述 JSON 資料結構的範例，考慮一個應該顯示建立者名字的列

{
    data: 'creator',
    render: 'firstName'
}

在此處提供的範例中，與簡單地使用 data: 'creator.firstName' 相比，此方法沒有任何優勢，但如果您有複雜的資料，且資料來源物件中包含正交資料，這有時會很有用。

內建輔助程式

DataTables 有許多內建的渲染輔助程式，可用於輕鬆格式化資料 - 可以使用外掛程式新增更多輔助程式（請參閱下文）

date - 格式化日期（自 1.12 起）
datetime - 格式化日期時間（自 1.12 起）
number - 用於格式化數字
text - 用於安全地顯示來自潛在不安全來源的文字（會逸出 HTML 實體）
time - 格式化時間（自 1.12 起）。

內建的渲染輔助程式可以在 DataTable.render 物件（自 1.11 起）或 $.fn.dataTable.render（它是相同物件的別名）下存取。它們是函式（允許將選項傳遞給它們），應立即執行並將其結果指派給 columns.render 方法。這聽起來可能有點複雜，但這僅表示您會使用如下內容

{
    data: 'price',
    render: DataTable.render.number( ... )
}

日期和時間輔助程式

我們將一起討論 date、datetime 和 time 輔助函式，因為它們都共用相同的 API。這些渲染器可用於

將 ISO-8601 字串格式化為與地區相關的顯示字串，而無需任何額外軟體，
透過 Moment.js 或 Luxon 將 ISO-8601 字串格式化為自訂格式，
在資料中的自訂格式和顯示的另一個自訂格式之間進行轉換（再次使用 Moment.js 或 Luxon）。

date、datetime 和 time 輔助函式具有以下函式簽章

DataTable.render.datetime()                  // Display a locale aware date / time from an ISO-8601 string
DataTable.render.datetime(to)                // Display a custom format date / time from an ISO-8601 string
DataTable.render.datetime(to, locale)        // Display a custom format date / time with a given locale
DataTable.render.datetime(from, to, locale)  // Transform from one custom format to another, with a given locale.

其中

to 是您希望在 DataTable 中顯示的格式。請注意，如果使用此選項，則必須在頁面上包含 Moment.js 或 Luxon。每個函式庫都有其自己的格式設定符號支援。請參閱它們的文件以瞭解可用的格式設定選項（Moment.js 文件 | Luxon）。
locale 是要傳遞給 Moment.js 或 Luxon 的地區設定。如果您使用此選項且它不是預設的 en，則需要確保為您正在使用的函式庫載入該地區設定。
from 應從列中剖析的日期/時間格式 - 當需要偵測非 ISO8601 日期/時間格式時，需要此格式。它也使用 Moment.js 和 Luxon 剖析符號，並請注意，剖析是嚴格的 - 它必須完全符合您的日期格式。

DataTables 中日期/時間處理的範例在此處提供。

數字輔助程式

number 輔助程式提供了輕鬆格式化數字的能力，您猜對了！在處理數字時，您可能經常希望新增格式設定，例如字首和字尾字元（例如貨幣指示符）、使用千位分隔符號並指定數字的精確度。number 輔助程式可以實現這一切。

此數字輔助函式具有以下函式簽章

DataTable.render.number()                                                // Locale aware number display (since 1.12)
DataTable.render.number(null, null, precision, prefix, postfix)          // Locale aware display with decimal places, prefix and postfix (since 1.12)
DataTable.render.number(thousands, decimal, precision, prefix, postfix) // Thousands and decimal specified

其中

thousands 是用於千位分隔符號的字元（可以為 null，在這種情況下，將使用與地區相關的分隔符號）
decimal 是用於小數字元的字元（可以為 null，在這種情況下，將使用與地區相關的字元）
precision 是浮點數精確度 - 0 代表整數，1 代表小數點後一位等等（選用）
prefix 是字首字串（選用）
postfix 是字尾字串（選用）

例如，要以 $19.99 格式顯示上述資料結構中的 price 資料點，我們將使用

{
    data: 'price',
    render: DataTable.render.number( null, null, 2, '$' )
}

請注意，null 用於千位數和小數字元。建議這樣做，因為這樣可以讓 DataTables 自動以適合您最終使用者的格式顯示數字。

此外，如果 number 輔助程式遇到不是有效數字的值（number 或包含數字的 string），它會在逸出其中的任何 HTML 實體後傳回該值（以幫助防止潛在的安全攻擊）。

數字渲染器的範例在此處提供。

文字輔助程式

text 輔助函式會確保來源資料中任何潛在的危險 HTML，都會經過跳脫 HTML 實體編碼，而不會被執行。如果載入的資料可能來自不信任的資料來源，這會相當有用，並且有助於減輕跨網站指令碼 (XSS) 攻擊。

text 輔助函式不接受任何參數，因此使用方式很簡單

{
    data: 'product',
    render: DataTable.render.text()
}

自訂輔助函式

渲染輔助函式只是附加到 DataTable.render 物件（也可以透過 $.fn.dataTable.render 存取）的函式，以便它們可以從單一位置輕鬆存取。這些函式必須傳回一個函式，該函式將與 columns.render 方法一起運作。

例如，考慮以下簡單的插件，它會在給定數量的字元後截斷文本，如果字串長度超過允許的字元數，則會顯示省略符號

DataTable.render.ellipsis = function ( cutoff ) {
    return function ( data, type, row ) {
        if ( type === 'display' ) {
            var str = data.toString(); // cast numbers

            return str.length < cutoff ?
                str :
                str.substr(0, cutoff-1) +'&#8230;';
        }

        // Search, order and type can use the original data
        return data;
    };
};

然後我們可以在 DataTables 的欄定義中使用它

{
    data: 'description',
    render: DataTable.render.ellipsis( 10 )
}

更全面的省略符號渲染輔助函式可在 DataTables 外掛程式儲存庫中找到，它具有斷字和 HTML 跳脫控制。隨著開發，其他輔助函式也將在同一個儲存庫中提供。

貢獻

如果您編寫了一個渲染輔助函式並希望與 DataTables 社群分享，首先，感謝您！渲染輔助函式可以提交到外掛程式儲存庫，非常歡迎提出 pull request。或者，如果您沒有 GitHub 帳戶，請將您的程式碼發佈在 DataTables 論壇中。