Datatable在搜索时考虑自定义属性数据



我正在使用搜索Datatable的搜索功能。但是在搜索时,它正在考虑我添加到onclick的事件参数的数据,如下所示。

onclick="GetStaffProfileFieldsHTMLForEditing(199,'smith, 1aaliya','3/10/2021 at 05:46 AM  CST<br/> by Test, DATA2','3/10/2021 at 05:46 AM  CST<br/> by Test, DATA2')"

当我搜索Data2时,它会显示这个在数据表的任何列中都不可见的记录。

即使我使用自定义属性,如下面,即使搜索不工作

user-madeChange='Data2, Test'

我如何在搜索时绕过这个?

更新1

这是测试

的urlJSFiddle

如果搜索Live 3, Live l3staff然后进行过滤,但是当搜索staff时,测试staff然后它没有过滤,因为它们都有这个五线谱。一个是in column,另一个是in click方法

问题

(这里没有新的信息-这只是我对你在问题中描述的问题的总结。)

你的数据是不寻常的(对我来说),因为它包含一个HTML5自定义属性,其中包含由额外的HTML代码组成的文本-例如,查看以下元素中的data-content属性:

<a title="" 
data-placement="left" 
data-html="true" 
name="topPopover" 
class="blue popovers" 
data-class="top-popover" 
data-container="body" 
data-trigger="hover" 
data-content="
<p>
<i>Last Modified:</i>
</br>3/10/2021 at 06:13 AM  CST
<br/> by Test, DATA2
</p>" 
data-original-title="">
<i class="far fa-clock"></i>
</a>

所以,在属性中有HTML标记。我以前从未见过这种情况——但总的来说,它看起来确实是有效的HTML。

DataTables具有相当复杂的全局过滤逻辑。该逻辑将data-content属性内嵌的HTML标签中的文本内容标识为"可见";用于过滤。

当然,因为它在一个属性中,这个数据在表中对你我来说是不可见的——但是如果它只是普通的HTML(不在属性中),它是可见的。

这就是为什么使用test的过滤器在您的小提琴中找到两个记录。事实上,以下所有的片段都是"看不见的"。文本由过滤器检查:

Last Modified: 3/10/2021 at 06:13 AM  CST by Test, DATA2
<<p>

解决方案/strong>这假设你不打算重新排列" html - insidean -attribute"情况。

如果你只想过滤用户可以在表中看到的数据,你可以使用DataTable的正交数据功能。这允许您为每个表单元格存储不同的值:

  • 显示值
  • 用于过滤的
  • 用于排序的值

您可以使用列呈现函数来定义这些不同的值。

$('#stafftable').DataTable( {  
columnDefs: [ {
targets: "_all", 
"render": function ( data, type, row, meta ) {
if ( type === 'filter' ) {                
var node = $('#stafftable').DataTable().cells(meta.row, meta.col).nodes()[0];
return node.textContent.trim();
} else {
return data;
}
}
} ]
} );

在构建表时,上面的渲染函数处理每个单元格。

如果处理类型为"filter"然后我们可以准备一些适合DataTables全局过滤器使用的数据。这将是可见数据。这将修复您当前遇到的过滤问题。

要从每个计算单元获得可见数据,我们必须访问计算单元的<td>节点:

var node = $('#stafftable').DataTable().cells(meta.row, meta.col).nodes()[0];

这给了我们每个<td>节点,通过使用DataTables API首先选择DataTables单元格,然后访问单元格的节点。

有了节点后,我们可以使用JavaScripttextContent属性来获取内容的可见文本部分:换句话说,所有的HTML标记都被丢弃—只保留可显示的文本。这意味着所有嵌套的data-contentHTML也被丢弃。

如果render函数没有构建过滤器数据,那么我们只使用return data——这是节点的全部内容(<td>元素内部的所有HTML)。

这意味着为过滤目的而丢弃的所有数据仍然在HTML表中-它没有丢失。我想你还需要它来进行下游加工。