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

如何解决Datatable 在搜索时考虑自定义属性数据

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

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

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

即使我使用如下自定义属性，搜索也不起作用

user-madeChange='Data2,Test'

如何在搜索时绕过它？

更新 1

这里是测试的网址

JSFiddle

如果搜索Live 3,Live L 3 人员，则它会进行过滤，但是当搜索人员测试人员 时，则不会进行过滤，因为两者都有此人员。一个在列中，第二个在点击方法中

解决方法

问题

（这里没有新信息 - 这只是我对您在问题中描述的问题的总结。）

您的小提琴中的数据（对我而言）不寻常，因为它包含一个 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 的过滤器在 Fiddle 中找到两条记录的原因。实际上，过滤器会检查以下所有“不可见”文本：

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

解决方案

这假设您不会重新安排“HTML-inside-an-attribute”情况。

如果您只想过滤用户可以在表格中看到的数据，您可以使用 DataTable 的 orthogonal data 功能。这让您可以为每个表格单元格存储不同的值：

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

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

$('#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;
      }
    }
  } ]
} );

说明

在构建表格时，每个单元格都由上述渲染函数处理。

如果处理类型是“过滤器”，那么我们可以准备一些适合DataTables全局过滤器使用的数据。这将只是可见数据。这将解决您目前遇到的过滤问题。

要从每个单元格中获取可见数据，我们必须访问单元格的 <td> 节点：

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

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

一旦我们有了节点，我们就可以使用 JavaScript textContent 属性来获取内容的可见文本部分：换句话说，所有 HTML 标记都被丢弃 - 只保留可显示的文本。这意味着所有嵌套的 data-content HTML 也将被丢弃。

如果 render 函数没有构建过滤器数据，那么我们只使用 return data - 它是节点的完整内容（<td> 元素内的所有 HTML） .

这意味着为过滤目的而丢弃的所有数据仍在 HTML 表中 - 它没有丢失。我假设您仍然需要它进行下游处理。