从数据表中搜索答案

【问题标题】：Searching from DataTable从数据表中搜索
【发布时间】：2016-08-04 09:02:08
【问题描述】：

https://datatables.net/reference/api/search()#Example

我以上面的链接为例进行搜索，但我的设置完全不同。

<td>
    <div class="plCell_desktop">
        <input type="radio" class="" data-lnk_id="414107671" data-group="RUTH">
        <label for="414107671">RUTH</label>
    </div>
</td>

这是我表的摘录。

唯一可见的数据是“露丝”。
但是当我搜索说“76”时，结果仍然会带回“Ruth”。
原因很可能是表格单元格中的信息比“Ruth”多得多。

好的，我的问题是。您可以强制 DataTables 从单词的开头进行搜索吗？例如（输入“uth”不会带回“Ruth”，但“Ru”会，希望它有意义）。

你能用 DataTables 做一种“innerHTML.val()”搜索吗？

【问题讨论】：

标签： javascript jquery datatables

【解决方案1】：

好的，我的问题是。您可以强制 DataTables 从一个词的开头。例如（输入“uth”不会带回“Ruth”，但是“Ru”会，希望它有意义）。

是的。预先创建一个自定义过滤器来执行这样的过滤。默认的“智能搜索”将被自定义过滤器否决，任何未来的过滤都将通过它：

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

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

您可能会注意到，让 dataTables 过滤整体区分大小写非常容易（仅作为示例）。过滤器阵列是一个 LIFO 结构，您可以在其中拥有多个过滤器。如果您出于任何原因将动态禁用“单词开头”过滤，则只需通过$.fn.dataTable.ext.search.pop() 删除过滤器。

【讨论】：

如果我可以问。我收到错误“TypeError: Cannot read property 'push' of undefined”。你能帮忙吗？
@morne，您似乎在 dataTables js 完全加载之前调用了这个？唯一一个似乎合乎逻辑的解释。您可以随时添加自定义过滤器，也可以在表初始化后添加。我想这对你来说没问题。除此之外，我并没有完全针对您要从标签中提取文本部分。如果是这样，代码当然应该是if ($(data[i], 'label').text().toLowerCase().indexOf(term) == 0 ) return true ...
有点延迟抱歉。在调试 JS 时，我得到一个“未定义的“搜索”。这可能是 DataTables 的版本。还有另一个使用 $.fn.dataTableExt.afnFiltering.push(function(oSettings, aData, iDataIndex) 的示例。这可能有效吗？
嘿@morne $.fn.dataTableExt.afnFiltering 是$.fn.dataTable.ext.search 的旧名称，它们是一样的。您正在使用 dataTables 1.10.x ...？ :)
是的。但从外观上看是 1.9.4。也许我应该得到更新的版本。

【解决方案2】：

你能用jQuery吗？

$(".plCell_desktop label").each(function() {
  // Using RexExp matching
  RexExp regex = new RegExp(); // Your regex obj
  if ($(this).val().match(regex)) {
    // Do stuff if it matches
  }

  // Or if you just want to do something if it has a value:
  if ($(this).val()) {
    // ...
  }
});

【讨论】：

【解决方案3】：

如果您需要在代码中多次访问匹配的标签，您可能希望避免每次都计算正则表达式。一种解决方案是运行一次性预处理，以添加自定义属性。我们就叫它isOk吧。

然后您可以使用标准的 jQuery 选择器选择标签：

$('label[isOk=Y]')

下面是一些演示代码。

var regex = /^RU/;

$('label').each(function() {
  $(this).attr('isOk', $(this).html().match(regex) !== null ? 'Y' : 'N');
});

var res = $('label[isOk=Y]');

// check whether we've selected the correct labels
res.each(function() { console.log($(this).attr('for')); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
    <div class="plCell_desktop">
        <input type="radio" class="" data-lnk_id="414107671" data-group="RUTH">
        <label for="414107671">RUTH</label>
        <input type="radio" class="" data-lnk_id="414107672" data-group="RUTH">
        <label for="414107672">RUTH TOO</label>
        <input type="radio" class="" data-lnk_id="414107673" data-group="RUTH">
        <label for="414107673">NOT REALLY RUTH</label>
    </div>
</td>

【讨论】：