DataTables
進階互動功能
為您的表格提供。
Editor
適用於 DataTables 的
綜合編輯函式庫。
手冊
下載
≡ 顯示網站導覽

Vue

Vue.js 是一個前端 Javascript 框架，廣泛用於建立反應式網路應用程式。我們發布了 datatables.net-vue3 套件，它提供了 DataTables 作為 Vue3 應用程式中的元件使用。

安裝和導入

使用您的套件管理員安裝 datatables.net-vue3 和 datatables.net-dt 套件

# npm
npm install --save datatables.net-vue3 datatables.net-dt

# yarn
yarn add datatables.net-vue3 datatables.net-dt

然後，若要在您自己的元件中使用 DataTables 元件，您需要 import 它和 DataTables 核心，然後將 DataTables 核心指定為元件中使用的函式庫，如下所示

import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net-dt';

DataTable.use(DataTablesCore);

這將給您一個 <DataTable> Vue 元件，您可以在您的模板中使用。

樣式

導入 datatables.net-dt 套件可能看起來是不必要的額外步驟 - 我們為何不直接依賴該套件？DataTables 支援許多不同的樣式框架（Bootstrap、Bulma、Foundation 等），每個框架都以不同的套件形式發布，因此我們在這裡做的是導入 DataTables 預設樣式套件，然後將其指定為 Vue 元件使用的函式庫。

如果您想使用 DataTables 的 Bootstrap 5 整合，您可以安裝 datatables.net-bs5 套件並使用它

import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net-bs5';

DataTable.use(DataTablesCore);

請注意套件名稱中關鍵的使用後綴 -bs5 而不是 -dt，以變更樣式整合。

使用下載產生器以確保您獲得所需的套件（且只有這些套件！）。

擴充功能

您也可以從自己的 npm 套件安裝 DataTables 擴充功能，並以標準方式使用它們 - 例如，對於 Select 和 Responsive，您可以使用

# npm
npm install --save \
    datatables.net-select-dt \
    datatables.net-responsive-dt

# yarn
yarn add \
    datatables.net-select-dt \
    datatables.net-responsive-dt

請注意再次使用 -dt 後綴來進行樣式設定 - 這將根據您需要的樣式套件而改變 - 再次使用下載產生器來取得您需要的套件名稱！

對於每個擴充功能，您需要 import 它才能向 DataTables 註冊。例如，若要同時使用 Select 和 Responsive

import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net-dt';
import 'datatables.net-select-dt';
import 'datatables.net-responsive-dt';

DataTable.use(DataTablesCore);

請注意，您還需要為擴充功能提供初始化選項（例如，本例中的 select 和 responsive）。請參閱下面的使用部分，以取得有關傳遞配置選項的詳細資訊。

相同的安裝適用於所有其他 DataTables 擴充功能。使用下載產生器以取得您想要的擴充功能之 npm 套件清單。

使用

一旦安裝並在您的元件中註冊，您將擁有一個 <DataTable> 標籤可在您的 Vue 模板中使用（如果您喜歡其他名稱，您也可以透過變更上面使用的 import 陳述式來變更名稱）。它有一個單一的可選插槽，可用於描述具有標頭和頁尾的表格

<DataTable class="display">
    <thead>
        <tr>
            <th>First</th>
            <th>Second</th>
        </tr>
    </thead>
</DataTable>

<DataTable> 元件具有以下可用的參數

  • columns - 定義用於 DataTables 初始化 的欄位陣列
  • data - DataTables 的資料陣列。這是可選的，如果您使用 Ajax 來載入 DataTable 資料，則不需要此參數。
  • ajax - DataTables 的 Ajax 選項 - 透過 Ajax 載入表格的資料。
  • class - 要指派給 table 標籤的類別名稱
  • options - 表格的 DataTables 選項。請注意，這可以包含 columns、data 和 ajax - 如果它們是由上面的一個屬性提供，則會覆寫此處給定的匹配選項。

基本初始化

在 Vue 應用程式中使用 DataTables 的最基本範例（組合式 API）是

<script setup>
import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net';

DataTable.use(DataTablesCore);

const data = [
  [1, 2],
  [3, 4],
];
</script>

<template>
    <DataTable :data="data" class="display">
        <thead>
            <tr>
                <th>A</th>
                <th>B</th>
            </tr>
        </thead>
    </DataTable>
</template>

範例：基本初始化。

Ajax 資料

您可能希望透過 Ajax 載入表格的資料以供顯示，而不是使用本機 Vue 資料。這可以使用 ajax 參數完成，該參數指向要從中載入資料的 URL

<script setup lang="ts">
import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net';

DataTable.use(DataTablesCore);

const columns = [
  { data: 'name', title: 'Name' },
  { data: 'position', title: 'Position' },
  { data: 'office', title: 'Office' },
  { data: 'extn', title: 'Extension' },
  { data: 'start_date', title: 'Start date' },
  { data: 'salary', title: 'Salary' },
];
</script>

<template>
    <DataTable
        :columns="columns"
        ajax="/data.json"
        class="display"
    />
</template>

為了簡潔起見，上面的程式碼已移除樣板程式碼。

範例：Ajax 資料範例，示範如何使用物件作為資料來源，透過 columns.data 選項填入表格。

事件

DataTables 發出大量事件，當事件發生時，這些事件可以很有用，可供偵聽和做出反應。使用 DataTables/Vue 元件，您可以像使用一般 Vue 事件處理常式一樣偵聽事件 - 即使用 @ 偵聽器

<DataTable
    ajax="/data.json"
    @xhr="xhrEvent"
    @draw="drawEvent"
>

這將偵聽 xhr 和 draw，並呼叫給定的函式。這些事件將被賦予與 DataTables 文件中所述相同的引數，但傳入的第一個參數除外，該參數是一個包含以下內容的物件

{
    e: Event,
    dt: DataTables.Api
}

範例：偵聽事件。

擴充功能

上面的安裝部分示範如何安裝和註冊 DataTables 擴充功能。一旦安裝它們，就可以透過其初始化選項以標準的 DataTables 方式使用它們。在此範例中，我們使用 select 選項初始化 Select 和 Responsive 擴充功能

<script setup lang="ts">
import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net';
import 'datatables.net-responsive';
import 'datatables.net-select';

DataTable.use(DataTablesCore);

const columns = [
  { data: 'name', title: 'Name' },
  { data: 'position', title: 'Position' },
  { data: 'office', title: 'Office' },
  { data: 'extn', title: 'Extension' },
  { data: 'start_date', title: 'Start date' },
  { data: 'salary', title: 'Salary' },
];

const options = {
  responsive: true,
  select: true,
};
</script>

<template>
    <DataTable
        :columns="columns"
        :options="options"
        ajax="/data.json"
        class="display nowrap"
    />
</template>

範例：Responsive 和 Select 擴充功能。

範例：用於檔案匯出的 Buttons 擴充功能，需要使用兩個額外的函式來指派 JSZip 和 pdfmake。

API

使用 DataTables 時，您通常會想要使用 其 API 來釋放其全部潛力。這可以透過 datatables.net-vue3 元件提供的 dt() 方法來實現。

let dt;
const table = ref(); // This variable is used in the `ref` attribute for the component

onMounted(function () {
  dt = table.value.dt;
});

請注意，請務必將 ref="table" 新增至 <DataTable> 元件標籤以取得連結的參考。現在您可以開始使用 API 方法。

反應式資料

Vue 最令人興奮和有用的部分之一是 反應式資料。總而言之，這是您更新資料（例如，variable = 1）時，UI 將自動更新以反映此變更 - 無論變更多麼複雜。datatables.net-vue3 套件完全支援 Vue 的反應式資料，並且會自動反映對資料所做的變更。

範例：反應式資料

此範例示範如何使用 DataTables API 動態更新表格以回應 Vue 的反應式資料。請注意，我們不需要透過任何 API 方法呼叫來告知 DataTables 新資料 - 它只是自動更新。

Vue 元件

您可能希望在 DataTable 的儲存格內顯示 Vue 元件。為此，DataTable 元件支援具名插槽的使用，並根據插槽名稱進行自動和手動指派。

自動插槽

DataTables Vue 元件會自動尋找具有以下名稱模式的插槽，並將它們指派給匹配的欄位

  • column-{integer} - 將此插槽指派給具有匹配索引的欄位（以零為基底）
  • column-{string} - 將此插槽指派給其 columns.name 屬性設定為 {string} 的欄位。

考慮具有兩個具名插槽的以下 DataTable 元件

<template>
    <DataTable ajax="/data.json">
        <template #column-1="props">
            <Button
                :text="`Col 1: ${props.cellData}`"
                @click="rowClick(props.rowData)"
            ></Button>
        </template>
        <template #column-extn="props">
            <Button
                :text="`Extn: ${props.cellData}`"
                @click="rowClick(props.rowData)"
            ></Button>
        </template>
    </DataTable>
</template>

第一個插槽的名稱為 column-1，因此會將其指派給表格中的第二個欄位，且 <Button> 元件將顯示在每一列的儲存格中。請注意，該元件使用了傳遞給它的屬性 - 請參閱下面的插槽屬性部分以取得更多詳細資訊。另請注意，它是一個規則的 Vue 元件，並且可以將事件等附加到它。

第二個插槽的名稱為 column-extn，因此會被指派給任何透過 columns.name 屬性將名稱設定為 extn 的欄位。

手動插槽

在某些情況下，您可能希望為插槽設定自訂名稱。為此，您可以使用 columns.render 選項，並將其設定為以 # 字首開頭的插槽名稱的字串。例如：

const columns = [
  // ...
  {
    data: null,
    render: '#action',
    title: 'Action'
  },
  // ...
];

這會用於名為 action 的插槽，如下所示：

<template>
    <DataTable ajax="/data.json">
        <template #action="props">
            <Button
                :text="`Col 1: ${props.cellData}`"
                @click="rowClick(props.rowData)"
            ></Button>
        </template>
    </DataTable>
</template>

您可能希望使用自訂名稱而非自動偵測的原因是為了正交資料。正交資料允許 DataTables 為排序、搜尋和顯示資料類型使用不同的值，這在使用複雜元件時尤其重要。

如同 DataTables 的標準正交資料，您可以使用 columns.render 選項作為一個物件，其中包含資料類型列表及其值，指定應從何處讀取值。若要顯示元件，請將 display 屬性設定為要使用的插槽名稱（帶有前導 #）。

const columns = [
  // ...
  {
    data: null,
    render: {
      _: 'name',
      display: '#action'
    },
    title: 'Action'
  },
  // ...
];

請注意，如果您沒有使用正交資料，DataTables 將會使用元件的內容進行排序和搜尋等操作，如同處理純 HTML 一樣。

插槽屬性

Vue 插槽可以傳遞屬性，我們在 DataTables Vue 元件中利用了這一點，讓您可以存取要呈現的儲存格資料。您可能已經注意到上方範例中用於插槽名稱的 props 屬性值。這是一個由以下結構組成的物件：

interface DataTablesNamedSlotProps {
    /** The data to show in the cell (from the `columns.data` configuration) */
    cellData: string;

    /** The column index for the cell (0-based index) */
    colIndex: Number;

    /** The data object for the whole row */
    rowData: any;

    /** Row index for the cell (data index, not the display index) */
    rowIndex: Number;

    /** Orthogonal data type */
    type: string;
}

這些屬性可用於呈現元件所需的資訊。通常您會參考 cellData，但對於需要多個資料點的較複雜元件，存取整列的資料物件可能會很有用。rowData 的格式將取決於您如何填充 DataTable - 它是提供給 DataTables 的原始資料物件（如果資料是從 HTML 讀取的，則為陣列）。

樣式

DataTables 對各種樣式庫的支援在 Vue 元件中完全支援。舉例來說，假設我們正在使用 Bootstrap 5 - 我們頁面的其餘部分是基於 Bootstrap 5 風格的，我們的 DataTable 應該反映這一點。我們有適用於 DataTables 核心及其所有與 Bootstrap 5（和其他樣式框架）配合使用的擴充功能的 npm 套件 - 它們以 -bs5 結尾（例如，Bootstrap 5 和 DataTables 核心的 datatables.net-bs5），而預設樣式具有 -dt 後綴。請參閱下載生成器，以取得您首選框架所需的樣式套件。

使用預設樣式，只需安裝樣式套件即可：

# npm
npm install --save datatables.net-dt

# yarn
yarn add datatables.net-dt

然後將其包含在您的 <style> 標籤中（請注意，我們在此處使用 Vite 來建構套件，這將解析來自節點套件以及 Javascript 的 CSS 樣式，使此功能生效）：

<style>
@import 'datatables.net-dt';
</style>

對於其他樣式框架，您還需要包含一個 Javascript 元素，該元素會配置 DataTables 及其擴充功能，以使用適用於所選框架的樣式和 DOM 結構 - 例如，對於 Bootstrap 5：

# npm
npm install --save datatables.net-bs5

# yarn
yarn add datatables.net-bs5

在您的 Vue 元件中，以與擴充功能完全相同的方式註冊樣式：

<script setup lang="ts">
import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net-bs5';

DataTable.use(DataTablesCore);

const columns = [
  { data: 'name' },
  { data: 'position' },
  { data: 'office' },
  { data: 'extn' },
  { data: 'start_date' },
  { data: 'salary' },
];
</script>

<style>
@import 'bootstrap';
@import 'datatables.net-bs5';
</style>

範例：您可以在此處看到Vue + DataTables + Bootstrap 5 的實際運作。

頁面導覽

DataTables

DataTables 由 SpryMedia Ltd 設計和建立。
© 2007-2024 MIT 授權。 隱私權政策。 贊助者。
SpryMedia Ltd 在蘇格蘭註冊，公司編號為 SC456502。