DataTables如何删除/隐藏列中重复信息的行

Question

我有一个包含网页名称的数据表：

|ID|Page          |Domain  |
----------------------------
|1 |test.com/page1|test.com|
|2 |test.com/page2|test.com|
|3 |xyz.net/page1 |xyz.net |
|4 |xyz.net/page2 |xyz.net |

我想要做的是隐藏（而不是分组）具有重复域名的行，并仅显示每个域名的第一个结果。

|ID|Page          |Domain  |
----------------------------
|1 |test.com/page1|test.com|
|3 |xyz.net/page1 |xyz.net |

我知道如何根据值隐藏行，但我想知道如何做上面的事情。

我是否需要编写自己的代码片段，并使用帮助器映射/数组，在其中存储已显示的域名？或者在datatables中有更聪明的方法来做到这一点吗？

- Michal

Answer 1

是的。我相信最简单的方法是先确定要排除的重复项，然后使用自定义过滤器仅显示那些未被排除的行。

循环遍历所有行，将已经存在该域的行标记为“已排除”：

var domain, domains = []
table.rows().every(function(rowIdx, tableLoop, rowLoop) {
  domain = this.data().domain;
  if (~domains.indexOf(domain)) {
    this.nodes().to$().attr('excluded', 'true')
  } else {
    domains.push(domain) 
  }
})

然后设置一个简单的自定义过滤器，只显示未标记为“排除”的行：

$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
   return table.row(dataIndex).nodes().to$().attr('excluded') != 'true'
})

我们可以通过以下方式始终返回显示所有行:

$.fn.dataTable.ext.search.pop()
table.draw()

演示 -> http://jsfiddle.net/w75pdyf9/

- davidkonrad

---

非常感谢David提供的出色建议和示例。谢谢！ - Michal

Answer 2

使用JavaScript字典

  var dictionary  = {};
                table = document.getElementById("YourTableID");
                tr = table.getElementsByTagName("tr");
                for (i = 0; i < tr.length; i++) {             
                    td = tr[i].getElementsByTagName("td")[0]; // `index for filter`        
                    if (dictionary[td.textContent]) {
                        tr[i].style.display = "none";
                    } else {
                        seen[td.textContent] = true;
                    }
                }

- Thisara Subath