如何使用 jQuery DataTables 插件过滤带有特殊字符的结果？

Posted 2023-05-07

【中文标题】如何使用 jQuery DataTables 插件过滤带有特殊字符的结果？

【英文标题】：How to filter results with special characters using jQuery DataTables plugin?

【发布时间】：2012-02-16 06:03:39

【问题描述】：

我在我的应用程序中使用 jQuery DataTables 插件，我的许多表格行和过滤器都有特殊字符，特别是其中的 & 符号。当我尝试过滤这些列时，所有记录都会消失，并显示“找不到匹配的记录”。

我已经尝试在将字符串打印到页面之前对其进行编码（即 htmlspecialchars）和解码（即 htmlspecialchars_decode），但似乎都不起作用。

示例：http://jsfiddle.net/gkdcZ/3/

任何想法为什么会发生这种情况，以及如何解决它？

HTML：

<select id="filter_col_1" name="filter_col_1">
    <option value="">Select</option>
    <option value="A&B">A&B</option>
    <option value="C">C</option>
    <option value="D">D</option>   
</select>

<tr>
    <td>A&B</td>
    <td>Jones, Brandon</td>
    <td>01/02/2003</td>
</tr>

javascript：

$("#filter_col_1").change( function()  
    $('#results').dataTable().fnFilter(
        '\\b' + $("#filter_col_1").val() + '\\b',
        1,
        true,
        false
    );
 );    

更新 #1： 问题似乎仅在您限制列时发生。见DataTables API。当参数设置为“null”时工作正常。 http://jsfiddle.net/gkdcZ/4/

更新 #2： 更近一点。添加替换 HTML 实体的函数适用于某些字符（即 & 符号），但不适用于其他字符（即感叹号和问号）。见http://jsfiddle.net/cz6Bs/4/

'\\b' + htmlEntities($('#filter_col_1').val()) + '\\b'

function htmlEntities(str) 
return String(str).replace(/&/g, '&')
                  .replace(/</g, '&lt;')
                  .replace(/>/g,     '&gt;')
                  .replace(/"/g, '&quot;');

【问题讨论】：

你能把 '&' 换成 'and' 吗？像这样：str_replace("&", " and ", $input);

我不明白你想做什么。你能发布你的Javascript代码吗？

刚刚在上面的 JavaScript 中添加。我正在尝试根据下拉框选择过滤搜索结果。我的下拉框有一些带有特殊字符的项目，这导致了问题。

刚刚添加了一个工作示例：jsfiddle.net/gkdcZ/3（尝试过滤“A&B”）。

$('#results').dataTable().fnFilter($("#filter_col_1").val(), null, false);

【参考方案1】：

dataTables 确实存在一个错误，该错误会导致任何特殊字符出现问题，因此您必须转义它们。

http://jsfiddle.net/cz6Bs/

注意：我添加了 XRegExp 作为转义的另一个资源。 http://xregexp.com/

【讨论】：

漏洞参考：datatables.net/forums/discussion/5879/…

这只是因为您将第二个参数更改回 null （请参阅此处列出的其他答案和我在上面更新的帖子）。如果您将代码更改回过滤特定列（即 0），即使使用 XRegExp jsfiddle.net/cz6Bs/1

也不起作用

【参考方案2】：

试试这个：

$(document).ready(function()  
$('#results').dataTable();
$("#filter_col_1").change( function()  
    $('#results').dataTable().fnFilter(  
'\\b' + htmlEntities($('#filter_col_1').val()) + '\\b', 
 0,
true,
false
);
  );  


);    
function htmlEntities(str) 
return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g,     '&gt;').replace(/"/g, '&quot;');

【讨论】：

这越来越接近修复了！ :) 但是，如果下拉列表和结果中还有其他字符（例如感叹号或问号），它似乎不起作用。 jsfiddle.net/cz6Bs/4（现在参见选项 C 和 D）

【参考方案3】：

试试这个

 $('#results').dataTable().fnFilter(
        $("#filter_col_1").val(),
        null,
        true
    );

将其设置为过滤所有列，现在可以使用...

【讨论】：

出于其他原因，我肯定需要保留正则表达式，并且特定的列过滤也相当重要。

ok 将正则表达式设置回 true ，工作...不知道“为什么只在列字段中使用 null...