2012 年 7 月 9 日星期一

正交資料

這篇部落格文章是在 DataTables 1.10 發布之前撰寫的,因此有些地方已過時。 例如,1.10 可以使用 columns.render 以及 columns.data。 這篇文章保留作為參考,但請參閱手冊中關於正交資料的部分,以瞭解如何使用 DataTables 處理正交資料。

資料是複雜的。表格中顯示的資料不僅有關於每個資料點如何對應到表格中其他資料點的規則,而且每個資料點本身可以有多種形式。例如,考慮貨幣資料;為了顯示,它可能會以貨幣符號和千位分隔符格式化顯示,而排序應以數值方式進行,並且在資料上搜尋將接受任何一種形式。在這篇文章中,我們將檢視 DataTables 如何使用單個資料點的不同形式,以直觀的方式向表格的使用者呈現複雜的資料集。

DataTables 有四個內建的資料操作,每個操作都可能使用獨立的資料來源。這四個操作是

  • 顯示
  • 排序
  • 類型偵測
  • 篩選

預設情況下,DataTables 將對所有四個操作使用相同的資料,但在 DataTables 1.9 中,可以輕鬆修改此設定。

mData 作為函數

DataTables 1.8 引入了一個名為 mData 的新屬性,該屬性允許 DataTables 使用幾乎任何 JSON 物件作為表格的資料來源(在部落格文章 使用 DataTables 的擴充資料來源選項 中有詳細討論),而 DataTables 1.9 基於此屬性,允許將正交資料用於 DataTables 所使用的不同資料類型。

在 DataTables 1.9 中,mData 可以作為函數給出,DataTables 會告訴您它正在請求哪個操作的資料。這允許您相應地處理資料,並傳回所請求資料類型的資料。此外,為了在使用 mData 作為函數時使 DataTables 的初始化盡可能簡潔,也可以使用此函數設定資料。因此,mData 的函數會傳遞三個參數

  • {array|object} 列的資料來源
  • {string} 所請求的資料類型呼叫 - 在設定資料時為 'set',在收集資料時為 'filter'、'display'、'type'、'sort' 或 undefined。 請注意,當為類型給定 undefined 時,DataTables 期望取回該物件的原始資料
  • {*} 當第二個參數為 'set' 時要設定的資料。

當呼叫類型為 'set' 時,不需要函數的傳回值,否則傳回值將用於所請求的資料。

貨幣範例

讓我們為貨幣範例建立一個 mData 函數。請注意,為了提高效率,由於 'set' 動作只發生一次(除非資料在未來更新),我們在 'set' 動作中儲存了三種不同的資料形式,這允許非常快速地查詢每個資料類型(用記憶體換取速度)。由此,我們可以建立如下的函數

function ( data, type, val ) {
    if (type === 'set') {
        // Store the base value
        data.price = val;

        // Display is formatted with a dollar sign and number formatting
        data.price_display = val==="" ? "" : "$"+numberFormat(val);

        // Filtering can occur on the formatted number, or the value alone
        data.price_filter  = val==="" ? "" : data.price_display+" "+val;
        return;
    }
    else if (type === 'display') {
        return data.price_display;
    }
    else if (type === 'filter') {
        return data.price_filter;
    }
    // 'sort', 'type' and undefined all just use the integer
    return data.price;
}

可以看出,如何在此函數中將任何格式套用到我們的資料,以及如何存取和使用來源資料中的任何資料屬性(可以執行數學計算,或者例如,可以為 Ajax 來源的資料在伺服器上預先格式化資料)。在上面的函數中,我們使用格式化函數 (numberFormat) 來新增千位分隔符,以格式化每個數字以提高可讀性。

您可以查看此範例的執行,並附有示範的完整原始碼

逐步建立

毫無疑問,您可以看到當使用 mData 作為函數時,貨幣範例僅是冰山一角。其他用例包括電話號碼、日期以及任何可能與排序或篩選方式不同的其他資料的格式化。

以下範例顯示了一個四欄表格,其中包含

  • 名稱 - 無額外處理
  • 電話 - 電話號碼,已格式化以供顯示和篩選
  • 薪資 - 使用上面顯示的函數的貨幣欄
  • 加入日期 - 一個日期欄,允許按不同的日期格式進行複雜篩選。例如,雖然日期顯示為 YYYY/MM/DD,但請嘗試在「December」上篩選表格 - 篩選值是從資料來源動態計算的。

檢視 Javascript 原始碼

fnRender 的關係

如果您之前使用過 DataTables,您可能會注意到這裡討論的 mDatafnRender 之間存在顯著的重疊。fnRender 自 v1.0 以來就已存在於 DataTables 中,並且僅提供較新 mData 功能的「顯示」部分。因此,現在認為 fnRender 已過時,並由作為函數的 mData 取代。fnRender 仍可在 DataTables 中使用,因為它可能很方便且為了向後相容,但一般而言,現在鼓勵使用 mData 而非 fnRender

結論

我們在這裡看到表格中使用的複雜資料,即使是單個資料點也可能有多種形式,具體取決於資料的使用案例。在 DataTables 中使用 mData 作為函數,使我們能夠輕鬆地建立簡單的資料處理函數,讓我們能夠充分利用資料的複雜性,為表格使用者提供最大的好處,並呈現直觀且簡單易用的介面。