javascript - 如何使用 columns().every() 检索仅包含过滤元素的列

Question

我有一个 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() 元素，但如果您进行过滤，它会继续从每列的整个行列表中提取行，无论它们是否可见。

---

示例...“未过滤”

鱼

1. 鳟鱼(可见)
2. 鲶鱼(可见)
3. 腔棘鱼(可见)

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

---

示例...“已过滤”

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

鱼

1. 鳟鱼(隐藏)
2. 鲶鱼(可见)
3. 腔棘鱼(隐藏)

---

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

提前致谢。

Answer 1

SOLUTION

使用合适的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 ...

DEMO

参见 this jsFiddle用于代码和演示。

NOTES

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