网站上所有页面的标题中的数据表搜索框答案

【问题标题】：Search box for datatables in Header for all pages on site网站上所有页面的标题中的数据表搜索框
【发布时间】：2012-03-13 10:59:07
【问题描述】：

我正在尝试创建一个搜索数据表的搜索框。

搜索框将位于网站所有页面的标题中。当用户在搜索框中输入并提交时，它将查询数据表。

我确实找到了这个：

<input type="text" id="myInputTextField">

oTable = $('#myTable').dataTable();
$('#myInpuTextField').keypress(function(){
      oTable.fnFilter( $(this).val() );
})

但我不确定如何实现这一点，因为搜索框将在标题中。

任何帮助建议将不胜感激。

【问题讨论】：

标签： jquery jquery-plugins datatables

【解决方案1】：

该代码是正确的。但是一切都取决于您的设置。 fnFilter 只接受一个必需参数，即要搜索的文本。如果您指定第二个参数，您将只过滤一列，否则它将搜索所有表格中的文本。您当然可以一次过滤多个表

//initialize table 1
var oTable = $('#myTable').dataTable();
//initialize table 2
var oTable2 = $('#myTable2').dataTable();
$('#myInpuTextField').keypress(function(){
      //filter table one
      oTable.fnFilter( $(this).val() );
      //filter table two
      oTable2.fnFilter( $(this).val() );
})

编辑 - 您的最后一条评论。为此，您必须使用表单将值发布到服务器。然后，您在输入字段中“预加载”发布的值并调用 fnFilter。类似于（在 PHP 中）

<?php
$postedSearch = $_POST['posted'];
?>
<script type="text/javascript">
$(function(){
  var oTable = $('#idOfTable').dataTable();
  if($('#myInputTextField').val() !== ''){
     oTable.fnFilter($('#myInputTextField').val());
  }
}())
</script>
<input type="text" id="myInputTextField" value="<?php echo $postedSearch ?>" />

【讨论】：

谢谢，很高兴知道，不过我只想查询一个表。我只是做一个普通的表格并发布到数据表所在的页面吗
@Codded 这个过滤是在服务器端完成的，你不需要发布任何东西。如果标题和表格在同一页面上，一切都应该没问题
标题在网站的所有页面上，比如 20。数据表在 1 页上。我想从任何页面的标题中搜索数据表。当我提交时，它将重定向到带有数据表的页面，然后用于过滤表。
brillaint 效果很好。不过有一个缺点。如果您在包含数据表的页面上并且使用表中的搜索框，则它不会更新标题中的搜索框。有没有办法做到这一点？