SearchPanes 渲染

SearchPanes 允許與 DataTables 已提供的渲染函式完全整合 (columns.render)。使用渲染器的主要優勢在於,您可以在不修改原始資料的情況下修改輸出。有關製作您自己的渲染函式的詳細資訊,可以在這裡找到。SearchPanes 在某些情況下也會使用正交資料,其詳細資訊可以在這裡找到

SearchPanes 的基本渲染

考慮以下常見的渲染函式

{ 
    data: "salary", 
    render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) 
}

在這裡,我們正在渲染薪資欄中每個儲存格的原始資料,使其更具可讀性,並以易於理解的格式呈現。在這種情況下,SearchPanes 將以與 DataTable 相同的格式顯示資料,自動偵測渲染函式。當搜尋表格時,搜尋將在表格的原始資料上執行。

當定義一個自訂的渲染函式(如下所示)時

{ 
    data: "salary", 
    render: function(data, type, row){
        if(row.salary <= 200000){
            return "Low";
        }
        else if (row.salary <=800000){
            return "Medium";
        }
        else if (row.salary > 800000){
            return "High";
        }
        else {
            return "Other";
        }
    } 
}

渲染函式將再次以與 DataTable 相同的方式顯示資料。但是現在它將根據這些選項進行篩選。

SearchPanes 的陣列渲染

考慮以下渲染函式

{ 
    data: "permission",
    render: {
        _: '[, ].name',
        sp:'[].name'
    },
    searchPanes: {
        orthogonal:'sp'
    }
}

在這裡,陣列格式的原始資料將以 string 顯示,並在 DataTable 中使用 ', ' 分隔符。SearchPane 中陣列中的每個不同元素都將被賦予一個選項。當搜尋這些選項時,將顯示原始陣列中包含該選項的任何列。