在 Lightning Aura Component 中使用 Datatables 插件实现自定义搜索功能

DataTables是一个功能强大的前端插件，可以用来轻松实现数据表格在前端的分页、搜索等功能（数据初始化后，无需请求服务器即可实现低延迟的分页、搜索等功能，加速页面响应时间，提升用户体验）。

DataTables默认提供模糊匹配，若需实现精确匹配则需要用到正则表达式。

在此样例中，分别有两个搜索关键字f1和f2（对应页面中的下拉框和输入框，f1需要精确匹配，f2需要模糊匹配），在用户点击搜索按钮后，会调用controller中的doSearch方法来搜索。

controller:

({
    doSearch: function (component, event, helper) {

        // 获取DataTable中的数据
        let tableElem = component.find("myTable").getElement();
        let table = $(tableElem).DataTable({ "retrieve": true });
        
        // 先初始化一版搜索结果
        let searchResult = table.search('');

        // 依次遍历搜索条件，每搜一个关键字就把结果返回一次，这样，搜索结果就是若干个搜索条件的交集了

        // 搜索条件1（精确匹配）
        let f1 = component.get("v.filter1");
        if (f1.length > 0) {
            f1 = f1.replace('\(', '\\(').replace('\)', '\\)'); // 精确搜索时需将关键字中的括号转义
            searchResult = searchResult.column(8).search('^' + f1 + '$', true, false); // 使用正则表达式实现精确搜索
        } else {
            // 若关键字为空，说明这一列不需要被筛选，在这一列搜索一个空字符串，这样，这一列的数据就会全部显示
            searchResult = searchResult.column(8).search('');
        }

        // 搜索条件4（模糊匹配）
        let f4 = component.get("v.filter4");
        if (f4.length > 0) {
            searchResult = searchResult.column(0).search(f4); // Datatables的默认搜索模式为模糊匹配
        } else {
            // 若关键字为空，说明这一列不需要被筛选，在这一列搜索一个空字符串，这样，这一列的数据就会全部显示
            searchResult = searchResult.column(0).search('');
        }

        // 重绘表格
        searchResult.draw();
    }
})

参见：

在所有列中搜索：https://datatables.net/reference/api/search()

在特定列中搜索：https://datatables.net/reference/api/column().search()