Phoenix - 使用 DataTables 的站点范围的搜索功能答案

【问题标题】：Phoenix - Site-wide Search Functionality Using DataTablesPhoenix - 使用 DataTables 的站点范围的搜索功能
【发布时间】：2016-07-24 20:04:28
【问题描述】：

我正在开发 Phoenix 网络应用程序，并试图找出一种方法来实现位于导航栏中的全局搜索框，该搜索框将指向位于 /users 的表并在其上执行搜索是用 DataTables 构建的。正如我现在所拥有的，当我通过搜索栏提交搜索时，它会重定向到/users，但不会将搜索应用于表格。

app.html.eex（布局）：

<form id="custom-search-input" class="nav navbar-nav pull-right" action="/users">
  <div class="input-group">
    <input id="ee-search" type="text" name="search" class="form-control" placeholder="Employee Search" />
    <span class="input-group-btn">
      <button class="btn btn-info">
        <i class="fa fa-search"></i>
      </button>
    </span>
  </div>
</form>

app.js：

$(document).ready( function () {
  $('#employeeTable').DataTable();
} );

var table = $('#employeeTable').DataTable( {
  "lengthMenu": [ [15, 50, 75, 150, -1], [15, 50, 75, 150, "All"] ]
} );

我在我放在 app.js 中的 DataTables API 中找到了这个：

$('#ee-search').on( 'keyup', function () {
  table.search( this.value ).draw();
} );

我提前道歉...我的 JavaScript 技能实际上是不存在的。如何让搜索输入应用于 DataTable？我假设有一种方法可以链接表单提交/javascript 代码/DataTable？如果您需要更多信息或代码，请告诉我。谢谢！

【问题讨论】：

如果您在keyup 处理程序可以看到的位置定义它，您应该能够按照您尝试的方式引用您的table 变量。您可能想在 table.search 行上放置一个断点并评估 table 以查看它是否未定义。根据我的经验，学习 javascript 部分是查找语法的问题，部分是在 DOM 对象中四处走动以查看真正存在的内容。
也许我在上一篇文章中没有清楚地理解你的问题。用户输入的搜索框与显示过滤结果的表格是否在不同的页面上？
@BobRodes 是的，搜索框位于静态导航栏上，可以从任何地方访问。 /users 页面基本上是一个员工目录，我正在努力使其可以从网站上的任何位置访问。

标签： javascript html datatables elixir phoenix-framework

【解决方案1】：

有三种方法可以将数据从一个页面传递到另一个页面，而无需往返服务器：获取数据、cookie 和本地存储中的会话变量。其中，我将从使用 GET 数据开始。

所以，请阅读this question，它（是众多示例中的一个，并且）解释了如何使用 GET 机制将数据从一个页面传递到另一个页面。基本上，您必须将method="GET" 添加到表单的属性中，然后从\users 页面解析生成的查询字符串。

然后，要执行搜索，只需调用search() 方法，将解析后的字符串作为参数传递，然后调用draw() 方法，所以：

myTable.search( myTextString ).draw();

DataTable 将应用搜索词、过滤结果并重绘表格。

【讨论】：

感谢您的帮助！我现在已经到了解析GET参数并将其作为/users页面上搜索框的值输入的地步，但是，它不提交搜索。是否有一些额外的代码需要添加到 jQuery 中以实际提交搜索？我尝试添加 .submit() 但这似乎不起作用。
您需要使用filter() 方法来应用搜索条件。抱歉，我错过了，天真地认为只需插入文本就会应用过滤器。编辑了我的帖子。
我知道你用filter() 去哪里了，但是search() 方法提供了我正在寻找的结果。我更新了您的答案以反映这一点。再次感谢您的帮助！
优秀。我不太喜欢过滤器，因为它适用于特定的列。 search 正是要使用的东西。好发现！我已经进一步更新了答案以删除有关搜索框编程更新的内容，因为 search 方法可以处理它。最后，它很简单。