自訂搜尋函式與搜尋窗格

自訂搜尋函式是搜尋窗格的關鍵功能之一。它們允許程式設計師定義他們自己的選項以顯示在搜尋窗格中。

注意：自訂搜尋函式與 stateSave 不相容。這是因為狀態是以 JSON 物件儲存，而函式無法以 JSON 表示。

撰寫自訂函式

自訂搜尋函式必須定義在 columns.searchPanes.options 陣列中的一個物件內。在定義自訂搜尋函式時，需要定義兩個屬性：

• label - 您希望選項在窗格中顯示的方式。
• value - 您的自訂函式。

自訂搜尋函式接受兩個參數：

• rowData - 目前在搜尋函式中比較的列的資料。
• rowIdx - 目前在搜尋函式中比較的列的索引。

如果該列要包含在結果集中，則函式應傳回 true，否則傳回 false。

下面顯示一個非常基本的範例，假設第 0 欄是數字類型的年齡欄。

$('myTable').DataTable( {
    searchPane: true,
    columnDefs:[
        {
            searchPanes:{
                options:[
                    {
                        label: 'Over 60',
                        value: function(rowData, rowIdx) {
                            return rowData[0] > 60;
                        }
                    }
                ]
            },
            targets: [0]
        }
    ]
})

這些自訂函式可以產生更複雜的搜尋函式，只要它們在要包含時傳回 true，否則傳回 false 即可。下面的範例將會找到所有是質數的年齡，並將它們顯示在表格中。

$('myTable').DataTable( {
    searchPane: true,
    columnDefs:[
        {
            searchPanes:{
                options:[
                    {
                        label: 'Prime Ages',
                        value: function(rowData, rowIdx) {
                            let primeNumber = true;
                            for(let i = 2; i< Math.sqrt(rowData[0]); i++){
                                if(rowData[0] % i == 0){
                                    primeNumber = false;
                                    break;
                                }
                            }
                            return primeNumber && rowData[0] > 1;
                        }
                    }
                ]
            },
            targets[0]
        }
    ]
})

定義自訂搜尋窗格

也可以定義一個不與特定欄位相關聯的窗格。雖然技術上可以在與列相關聯的現有欄位中搜尋多個欄位，但為它們建立另一個窗格似乎更整潔。

為了做到這一點，我們在 searchPanes.panes 陣列中定義一個物件。此陣列包含要建立的每個窗格的物件。對於每個物件，都有一個 header 屬性，其中包含要設定為窗格標題的字串。還有一個 searchPanes 屬性，該屬性依次具有一個 options 屬性，該屬性包含與以前相同的自訂搜尋函式。下面顯示了一個範例。

$('#myTable').DataTable( {
    searchPanes: {
        panes: [{
            header: 'custom',
            options: [{
                label: 'Accountants in Tokyo',
                value: function(rowData, rowIdx){
                    return rowData[2] === 'Accountant' && rowData[3] === 'Tokyo';
                }
            }]
        }]
    }
} );

上面的範例在表格中搜尋職位為 會計 且位於 東京 的人員。如上所述，在選項陣列中新增更多物件將會向新窗格新增更多選項。

函式的上下文是主機 DataTable 的 API 實例。這表示在自訂搜尋函式中可以呼叫 this.rows().data() 和其他 API 方法。