自定义搜索功能和窗格

自定义搜索功能是搜索窗格的关键功能之一。它们允许程序员定义自己的选项放进搜索窗格。

注意：自定义搜索功能与 stateSave 不兼容。这是因为状态已保存为 JSON 对象，函数无法用 JSON 表示。

编写自定义函数

自定义搜索函数必须在 columns.searchPanes.options 数组中的对象内定义。在定义自定义搜索函数时，有两项需要定义的属性：

• 标签 - 希望如何将选项显示在窗格中。
• 值 - 您的自定义函数。

自定义搜索函数接受两个参数

• 行数据 - 当前在搜索函数中比较的行的数据。
• 行序号 - 当前在搜索函数中比较的行序号。

如果要将行包含在结果集中，则函数应返回 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 数组中定义了一个对象。此数组包含要创建的每个窗格的对象。对于这些对象中的每一个，都有一个 标题 属性，该属性包含要设置为窗格标题的字符串。还有一个 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 方法。