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

Phoenix - Site-wide Search Functionality Using DataTables

本文关键字：范围 搜索 功能 站点 使用 DataTables Phoenix-      更新时间：2023-09-26

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

app.html.ex（布局）：

<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？如果你需要更多的信息或代码，请告诉我。谢谢

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

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

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

myTable.search( myTextString ).draw();

DataTable将应用搜索项、筛选结果并重新绘制表。

相关文章：