渲染外掛程式

資料渲染器可以用於將資料從一種格式轉換為另一種格式。如果您想要自訂使用者看到的資料，這會很有用 - 例如，針對數字顯示百分比長條圖。

DataTables 有三個內建的渲染器 (datetime、number 和 text)，可以透過下面的外掛程式進行擴充。也可以根據需要建立更多 - 請參閱這篇部落格文章，以取得建立您自己外掛程式的完整說明。

如何使用

資料渲染外掛程式實際上只是應用於columns.render選項的函式 (請參閱DataTables 渲染器文件以取得更多詳細資訊)。載入後，資料渲染外掛程式會附加到 DataTable.render 物件，然後您會參考該物件以使用columns.render選項。

瀏覽器

在瀏覽器中直接載入資料渲染外掛程式只需要載入外掛程式的 Javascript 即可。例如，下面的程式碼使用儲存在檔案中的 ellipsis 外掛程式

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

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

ES 模組

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

import DataTable from 'datatables.net';
import 'datatables.net-plugins/dataRender/ellipsis.mjs';

var table = new DataTable('#myTable', {
    columnDefs: [
        {
            target: 0,
            render: DataTable.render.ellipsis(),
        },
    ],
});

CommonJS

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

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

外掛程式

anchor	將欄資料渲染為 HTML 錨點 (`a` 標籤)
datetime	將日期/時間來源資料轉換為適合顯示的格式
ellipsis	將輸出資料限制為特定長度，並顯示任何
hyperLink	使用自訂的預留位置在超連結中顯示 URL 資料
intl	使用 Intl Javascript API 渲染日期和數字
multi	使用多個渲染器
numberTo	將數字轉換為波斯語、英語、阿拉伯語。
percentageBars	將百分比值顯示為長條圖