文章/答案/技术大牛

发布

社区首页 >问答首页 >Phoenix -使用DataTables的全站搜索功能

问Phoenix -使用DataTables的全站搜索功能
EN

Stack Overflow用户

提问于 2016-07-23 04:51:32

回答 1查看 345关注 0票数 1

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

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

javascript

html

datatables

elixir

phoenix-framework

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-07-24 01:28:50

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

因此，请阅读this question，它(和)解释了如何使用GET机制将数据从一个页面传递到另一个页面。基本上，您必须将method="GET"添加到表单的属性中，然后解析来自\users页面的查询字符串。

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

myTable.search( myTextString ).draw();

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38535040

复制

相似问题

问Phoenix -使用DataTables的全站搜索功能
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Phoenix -使用DataTables的全站搜索功能EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Phoenix -使用DataTables的全站搜索功能
EN