如何使用List.js在DataTable中搜索/排序IP地址

云原生阿岚

2026-8-5

List.js表格IP地址搜索修复方案

问题描述

在DataTable中手动添加IP地址列后，显示正常但搜索功能异常：

输入127时能匹配到包含该数字的IP行
输入127.或完整IP127.0.0.1时，显示“无结果”

原因

List.js默认搜索逻辑将.视为正则表达式的特殊字符（匹配任意字符），而非字面意义的点号，导致无法正确匹配IP地址中的点分隔符。

解决方案

修改List.js的初始化配置，添加自定义搜索函数，转义正则特殊字符并处理HTML内容：

代码修改

找到原代码中的options对象，替换为以下内容：

options = {
    valueNames: ["id", "customer_name", "ip_address", "email", "date", "phone", "status"],
    page: perPage,
    pagination: !0,
    plugins: [ListPagination({
        left: 2,
        right: 2
    })],
    // 自定义搜索函数，处理正则特殊字符
    searchFunction: function(searchString, item) {
        // 转义所有正则特殊字符：. * + ? ^ $ { } ( ) | [ ] \
        const escapedSearch = searchString.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
        const matchRegex = new RegExp(escapedSearch, 'i'); // 不区分大小写

        // 遍历所有字段值，检查是否匹配
        return Object.values(item.values()).some(fieldValue => {
            // 处理带有HTML标签的字段（如status的badge），提取纯文本
            let plainText = fieldValue;
            if (typeof plainText === 'string' && plainText.includes('<')) {
                const tempElement = document.createElement('div');
                tempElement.innerHTML = plainText;
                plainText = tempElement.textContent || tempElement.innerText || '';
            }
            return matchRegex.test(plainText);
        });
    }
};