datatables 用一个空格替换 2+空格 + 我可以停止吗？

Question

<tbody>
            <tr>
                <td>Tiger          Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>

我注意到数据表删除了 2+ 个空格并将其替换为输入数据表的数据中的 1 个空格。这可以在上面的<td>Tiger Nixon</td> 中看到。所以在数据表中它显示为Tiger Nixon（有一个空格）。所以我可以通过搜索Tiger Nixon（有一个空格）找到Tiger Nixon。举个愚蠢的例子，如果我想找到Tiger Nixon Tiger Nixon 中的所有空格（一个空格）。

这是我的FIDDLE 说明了这一点。

这更像是我刚刚发现的一个观察结果，但我很想知道是否有办法阻止数据表这样做。使数据与传递给数据表的数据完全相同。

注意顺便说一句，我有另一个使用 serverside processing 的数据表示例，数据表保留 2+ 个空格，但我无法在这里说明。

进一步说明：

如果我在数据库中搜索 2 个空格

select * from xyz23 where Device_Manufacturer LIKE '%International  %';
                                                                  ^^2spaces

它将带回带有 2 个空格的 4 个结果

International  Telecommunications Investment and Commerce Joint Stock Company 
             ^^2spaces

在数据表中搜索：

International  
             ^^2spaces

将带回 4 个结果，但它们在数据表中只有 1 个空间：

International Telecommunications Investment and Commerce Joint Stock Company
             ^1space

即使从数据库返回了 2 个空格（在 chrome 中的 Network-XHR-Response 下的响应中看到）

International  Telecommunications Investment and Commerce Joint Stock Company
             ^^2spaces

但是根据下面的@davidkonrad 回答“......简单地呈现 HTML 的方式......”，这是有道理的，即使它在理解这一点之前让我有点困惑。

但是，如果我在数据表中搜索：

International T
             ^1space

我不会得到任何结果，这与使用下面的 2 个空格找到它时显示的结果不同。

但如果我在数据表中搜索：

International  T
             ^^2spaces

我用 1 个空格得到 4 个结果：

International Telecommunications Investment and Commerce Joint Stock Company
             ^1space

所以这可能有点令人困惑，但我现在更好地理解它，感谢@davidkonrad 在下面解决这个问题

---

EDIT1 - 供我参考

只在第一列执行：使用targets: 0,

var table = $('#example').DataTable({
  columnDefs : [{
    targets: 0,
    render: function(data, type, row, meta) {
       return '<pre>' + data + '</pre>'
    }
  }]

});

Answer 1

这完全在意料之中。 “替换”空格的不是 dataTables，而是阅读器/浏览器打算如何呈现 HTML。空白应该留给我们或减少到绝对最小值。

如果您想保留空白，可以将内容包装到 <pre> 部分中，如下所示：

columnDefs : [{
   targets: '_all',
   render: function(data, type, row, meta) {
     return '<pre>' + data + '</pre>'
   }
}]

现在所有列中都保留了空格。如果<pre> 标签的默认浏览器呈现是一个问题，您可以将其重置，使其看起来透明：

pre {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
  background: transparent;
}

更新小提琴 -> https://jsfiddle.net/7bLat1ph/1/ 尝试搜索“老虎”..

---

更新。尊重空白的自定义过滤器示例。

$.fn.dataTable.ext.search.push(function( settings, data, dataIndex ) { 
  var term = $('.dataTables_filter input').val().replace(/\s/, ' ');
  if (!term) return true;
  for (var i=0, l=data.length; i<l; i++) {
    if (~data[i].replace(/\s/, '&nbsp;').indexOf(term)) return true
  }
  return false
})

更新小提琴 -> https://jsfiddle.net/7bLat1ph/2/