Question

我正在开发一个凤凰网络应用程序，并试图找到一种方法来实现位于导航栏中的全局搜索框，该搜索框将指向并在{{1}的表格上执行搜索用DataTables构建的。就像我现在一样，当我通过搜索栏提交搜索时，它会重定向到/users，但不会将搜索应用到表格中。

app.html.eex（布局）：

/users

app.js：

<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中的DataTables API中找到了这个：

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

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

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

Answer 1

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

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

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

myTable.search( myTextString ).draw();

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

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

1 个答案: