Jquery Datatables-datatable外部的搜索框

我使用的是DataTables（），我希望我的搜索框位于表之外（例如在我的header div中）

---

这可能吗？

您可以使用DataTables api筛选表。因此，您所需要的只是您自己的输入字段，其中包含一个keyup事件，该事件将触发数据表的筛选函数。使用css或jquery，您可以隐藏/删除现有的搜索输入字段。或者DataTables有一个删除/不包括它的设置

请在此上签出Datatables API文档

例如：

HTML

您可以为此使用该选项

默认情况下，搜索输入在其自己的div中：

sDom: '<"search-box"r>lftip'

上述操作将搜索/过滤

input

元素放入它自己的

div

中，其中一个名为

search box

的类位于实际表之外

---

即使它使用其特殊的速记语法，它实际上也可以接受您抛出的任何HTML。

当使用

fnDrawCallback

函数绘制表时，您可以移动div

    $("#myTable").dataTable({
    "fnDrawCallback": function (oSettings) {
        $(".dataTables_filter").each(function () {
            $(this).appendTo($(this).parent().siblings(".panel-body"));
        });
    }
});

---

这一个帮助我获得了DataTables 1.10.4版，因为它是新的API

var oTable = $('#myTable').DataTable();    
$('#myInputTextField').keyup(function(){
   oTable.search( $(this).val() ).draw();
})

---

根据@lvkz评论：

如果将datatable与大写字母d一起使用

.datatable（）

（这将返回datatable API对象），请使用以下命令：

 oTable.search($(this).val()).draw() ;

 oTable.fnFilter($(this).val());

这就是@netbrain的答案

如果将datatable与小写字母d一起使用

.datatable（）

（这将返回一个jquery对象），请使用以下命令：

 oTable.search($(this).val()).draw() ;

 oTable.fnFilter($(this).val());

在

loadtransajax.php

中，您可能会收到get值：

if ($_GET['text_min_val']){
    $sWhere = "WHERE ("; 
    $sWhere .= " t_group_no LIKE '%" . mysql_real_escape_string($_GET['text_min_val']) . "%' ";
    $sWhere .= ')';
}

---

如果您使用的是JQuery dataTable，那么只需添加

“bFilter”：true

。这将在表外显示默认搜索框，并根据预期动态工作

$("#archivedAssignments").dataTable({
                "sPaginationType": "full_numbers",
                "bFilter":true,
                "sPageFirst": false,
                "sPageLast": false,
                "oLanguage": {
                "oPaginate": {
                    "sPrevious": "<< previous",
                    "sNext" : "Next >>",
                    "sFirst": "<<",
                    "sLast": ">>"
                    }
                },
            "bJQueryUI": false,
            "bLengthChange": false,
            "bInfo":false,
            "bSortable":true
        });    

$（“#archivedAssignments”）.dataTable({
“sPaginationType”：“完整编号”，
“bFilter”：没错，
“sPageFirst”：错误，
“sPageLast”：错误，
“语言”：{
“oPaginate”：{
“以前的”：“>”，
“sFirst”：”
}
},
“bJQueryUI”：错，
“bLengthChange”：false，
“bInfo”：假，
“可移植”：真
});    

这应该适合您：（数据表1.10.7）

或

---

较新版本有不同的语法：

var table=$（'#示例'）.DataTable（）；
//#myInput是一个元素
$（'#myInput'）。on（'keyup change'，function（）{
table.search（this.value）.draw（）；
});

请注意，此示例使用首次初始化datatables时分配的变量

table

。如果您没有此变量，只需使用：

var table=$（'#示例'）.dataTable（）.api（）；
//#myInput是一个元素
$（'#myInput'）。on（'keyup change'，function（）{
table.search（this.value）.draw（）；
});

自：数据表1.10

---

–来源：

我也有同样的问题

我尝试了所有张贴的备选方案，但没有效果，我使用了一种不正确的方法，但效果非常好

示例搜索输入

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

---

如果您使用服务器端处理（请参阅选项），我想在相关的示例中再添加一个内容

默认情况下由datatables执行的查询限制（请参见选项）不适用于

.search（）

API调用。您可以通过以下方式使用将其取回：

var table = $('#myTable').DataTable();
var search = $.fn.dataTable.util.throttle(
    function(val) {
        table.search(val).draw();
    },
    400  // Search delay in ms
);

$('#mySearchBox').keyup(function() {
    search(this.value);
});

---

@马库斯：事实上，我觉得sDom使用起来并不优雅，撇开我们不能完全定制搜索框（搜索框中有一个硬编码的“搜索”文本）这个事实不谈。但它仍然在div.datatables_包装器中，有没有办法将它移出包装器？@Artur79遗憾的是，没有。没有黑客攻击datatables的源代码，至少。@HoángLong您实际上可以使用如下选项自定义搜索框：

语言：{search:“example”，searchPlaceholder:“example”}

您肯定应该使用.keyup而不是.keypress，否则您会遇到结果延迟，我会把

$（“.dataTables\u filter:input”）.focus（）.val（value）放进去.keypress（）keyup

中输入code>大约一个小时，然后才找到这个。但决不要使用API。。优雅的解决方案！JS需要更改为使用.search（$（this.val（））.draw（）代替fnFilter。请参阅：我更改了此答案以解决此问题，但它似乎需要先经过同行审查。备注：您仍然需要“searching:true”选项，然后您可能希望隐藏默认搜索框，因此只需将sDOM选项设置为null。实例化$（）.dataTable（），并使用一个小“d”将返回jQuery对象而不是DataTables API实例。后者可以通过使用大写字母“D”调用“oTable=$（'#myTable'）.DataTable（）；”来实现。这需要能够调用。搜索它（否则将抛出“函数未定义”错误）。请参阅：

oTable.fnFilter（$（this.val（））

对我也有效，这两种方法都有效，具体取决于您调用datatable的方式：`oTable.search（$（this.val（））.draw（）；`调用它时使用：

.DataTable（）

，这个：

oTable.fnFilter（$（this.val（））

当您使用

.dataTable（）

时，差异在大写字母D处。希望能有所帮助！对于datatables版本1.10.5，给出了一个“oTable.fnFilter不是函数”错误。刚刚发现，使用jQuery，您也可以像这样访问数据库API：

oTable.API（）.search（$（this.val（））.draw（）

它可能很有用，特别是如果您还想手动控制分页

长度

：

oTable.api（）.page.len（$（this.val（））.draw（）请注意“var oTable=$（'#myTable'）.DataTable（）；”（）的大写字母“D”，或者如果您使用较新版本的DataTable，您将拥有：
“drawCallback”：函数（设置）{$（“.dataTables\u过滤器”）。每个（函数（）{$（this）.appendTo（$（this.parent（）.sides（.panel body）（）；）；），
问题是更改动态创建的文件的位置。聚氨基甲酸酯
oTable = $('#myTable').dataTable();

$('#myInputTextField').on('keyup change', function(){
  oTable.api().search($(this).val()).draw();
})

oTable = $('#myTable').DataTable();

$('#myInputTextField').on('keyup change', function(){
  oTable.search($(this).val()).draw();
})

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

$('#listingData').dataTable({
  responsive: true,
  "bFilter": true // show search input
});
$("#listingData_filter").addClass("hidden"); // hidden search input

$("#searchInput").on("input", function (e) {
   e.preventDefault();
   $('#listingData').DataTable().search($(this).val()).draw();
});

var table = $('#myTable').DataTable();
var search = $.fn.dataTable.util.throttle(
    function(val) {
        table.search(val).draw();
    },
    400  // Search delay in ms
);

$('#mySearchBox').keyup(function() {
    search(this.value);
});