jquery - 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

这是测试的url

JSFiddle

如果搜索Live 3、Live L 3员工，那么它会过滤，但是当搜索员工测试员工时，它不会过滤，因为两者都有这个员工。一个在列中，第二个在其点击方法中

标签： jquerydatatables

问题

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

你小提琴中的数据是不寻常的（对我来说），因为它包含一个 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 的正交数据功能。这使您可以为每个表格单元格存储不同的值：

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

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

$('#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 单元格，然后访问单元格的节点。

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

如果该render函数没有构建过滤器数据，那么我们只需使用return data- 即节点的全部内容（<td>元素内的所有 HTML）。

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

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

问题描述

解决方案

推荐阅读