如何使用 columns().every() 仅检索带有过滤元素的列

Posted 2023-05-08

【中文标题】如何使用 columns().every() 仅检索带有过滤元素的列

【英文标题】：How to use columns().every() to retrieve columns with filtered elements only

【发布时间】：2015-12-22 10:53:51

【问题描述】：

我有一个 DataTable，它要求我检索每列中最长的 .text() 元素。为此，我实现了以下脚本。

$('#example').DataTable(
     deferRender: true,
     autoWidth: false,
     drawCallback: function () 

         var table = $('#example').DataTable();

          table.columns().every(function () 

               var longestSoFar = -1;
               var longestItem;

               this.nodes().to$().each(function () 

                    var text = $(this).text();
                    if (text.length > longestSoFar) 
                         longestSoFar = text.length;
                         longestItem = this;
                    
               );

               var longestTD = $(longestItem).html();

               console.log(longestTD);

          );
     
);

此脚本正常工作并记录每列最长的 .text() 元素，但如果您进行过滤，它会继续从每列的整个行列表中提取，无论它们是否可见。

---

示例...“未过滤”

鱼

鳟鱼（可见） 鲶鱼（可见） 腔棘鱼（可见）

在这种情况下，我的函数返回“腔棘鱼”，这是正确的。

---

示例...“过滤”

如果我将此 DataTable 过滤为“Cat”...只会显示一个可见行...“Catfish”。

鱼

鳟鱼（隐藏） 鲶鱼（可见） 腔棘鱼（隐藏）

---

在这种情况下，我的函数应该返回“Catfish”，但它继续返回“Coelacanth”。有没有办法让它忽略任何过滤的行，只从屏幕上可见的“过滤”项目中提取？

提前致谢。

【参考方案1】：

解决方案

使用适当的selector-modifier ( search: 'applied' ) 来说明当前的搜索查询（如果适用）：

// ... skipped ...

table.columns().every(function (index) 
   var longestSoFar = -1;
   var longestItem;

   var column = table.column(index,  search: 'applied' );
   column.nodes().to$().each(function () 

// ... skipped ...

演示

有关代码和演示，请参阅 this jsFiddle。

注意事项

jQuery DataTables 版本 1.10.6 - 1.10.9 存在一个问题，其中 selector-modifier ( search: 'applied' ) 不能用作 columns().every() API 方法的参数，请参阅此 issue #679。

如果使用 nightly build 或 1.10.9 之后发布的 jQuery DataTables 版本，可以使用以下代码：

// ... skipped ...

var table = $('#example').DataTable();
table.columns( search: 'applied' ).every(function (index) 

   this.nodes().to$().each(function () 
   // ... skipped ...

【讨论】：

它仍然返回所有结果，即使是从过滤器中删除的结果。

旁注给遇到此情况的其他人... 至少需要 DataTables 1.10.9。

@kojay，我的示例使用 1.10.9，但 columns().every() 从 1.10.6 开始可用。甚至可以使用自 1.10.0 起可用的 each()。

我完全同意你的看法。但是，使用上面的脚本和 1.10.6 有一个奇怪的复制问题。它提取第一列的最长元素并为表中的每一列记录它。当我检查我当前的 DT 版本号时，我使用的是 1.10.6 并注意到你使用的是 1.10.9，所以我升级了我的版本，它按照你的描述工作。我只是不希望其他人试图复制它，收到错误的结果，因为你的脚本在各个方面都完美无缺。