javascript - Phoenix - 使用数据表的站点范围搜索功能

Question

我正在开发一个 Phoenix Web 应用程序，并试图找出一种方法来实现位于导航栏中的全局搜索框，该搜索框将指向位于 /的表格并对其执行搜索用户 使用 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"] ]
} );

我在 DataTables API 中找到了它，并将其放置在 app.js 中:

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

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

Answer 1

可以通过三种方式将数据从一个页面传递到另一页面，而无需往返服务器:GET 数据、cookie 和本地存储中的 session 变量。其中，我首先使用 GET 数据。

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

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

myTable.search( myTextString ).draw();

数据表将应用搜索词、过滤结果并重新绘制表格。