覆盖数据表默认搜索功能答案

【问题标题】：Override Datatables default search function覆盖数据表默认搜索功能
【发布时间】：2016-07-09 08:25:06
【问题描述】：

我在我的网站上使用 Datatables (https://datatables.net)，并希望使用 levenstein 方法覆盖默认搜索功能。

我已经使用了 levenstein 方法，但是我在抓取搜索框的值来测试它时遇到了问题。 Datatables 添加的搜索框没有 ID 或名称或任何其他我可以轻松用于定位该元素的内容。

我可以想到两种方法来解决这个问题：

弄清楚如何获取搜索框值（用户输入的值）
弄清楚如何在不完全关闭搜索的情况下隐藏搜索框，并添加我自己的自定义输入。

这就是我所拥有的。

$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var search = /* this should be the search box value */;
        var title = data[1];

        return ( title.toLowerCase().levenstein(search.toLowerCase()) < title.length ) ? true : false;
    }
);

您能帮我解决上面列出的任一选项吗？

谢谢。

【问题讨论】：

你不能afaik；搜索框仅使用数据表 API。好吧，实际上，您也许可以破坏搜索方法，但 dt-made gui 只能与 API 一起使用，这是要记住的主要事项。

标签： javascript datatables

【解决方案1】：

没有 id 或 name 或其他任何东西

嗯，是的，它确实有。这对我有用：

$('#myTable_filter input').on('keypress', function(e) {
    e.preventDefault();
    alert(e.which);
});

只需转到搜索框并检查它（如果您不知道如何在 Chrome 中执行此操作，只需右键单击任何元素并选择检查），您就可以看到它是如何为自己工作的。 DataTables 将一个id（你的表名加上_filter）应用于包裹输入框的div，它是div 中唯一的输入框。所以这个选择器有效。您还需要执行preventDefault，以便在击键后不会运行 DataTables 搜索。

【讨论】：

谢谢，我回家后试试这个。我可以通过隐藏#table_filter 来隐藏搜索框。现在它只是让我的搜索正常运行。似乎我的搜索在默认搜索之后运行，所以不知道如何阻止他们的运行。我回家后会尝试 preventDefault() ，但不确定它是否会起作用，因为我的似乎是在他们之后。
你可能是对的。当您执行 preventDefault 时，它会停止按键。如果您在应用自己的搜索例程后以编程方式填充搜索框，则可能会再次触发 keypress 事件...
另外，看看the DataTables search event，它在重绘表格之前但在将搜索条件应用于基础数据之后触发。在这种情况下，您可能会阻止默认设置，撤消应用搜索的键，应用您自己的搜索并重新绘制表格。您还可以通过抓住按键上的字符并防止它来防止两次将字符放入搜索框中的抖动。
我尝试在按键上使用，但它似乎不起作用，至少在我放置的代码中。我不得不使用$('#search').val($('#search').val() + e.key) 来设置输入，这只是有点工作。最重要的是，keypress 似乎没有选择退格键按下事件，因此它保留了以前的搜索结果。
除此之外，它仍在运行原始搜索，但我认为这是因为在 keypress 方法中，我告诉它table.search( search_value ).draw(); 如果我知道如何删除数据并将数据添加到表中（比如获取data()，修改它，然后设置 data() )，然后我会这样做而不是搜索，但似乎没有办法在表实例化后设置数据。