数据表 - 数据表外的搜索框

Question

我正在使用DataTables(datatables.net),我希望我的搜索框在表格之外(例如在我的标题div中).

这可能吗 ？

Answer 1

您可以使用DataTables api过滤表.所以你需要的只是你自己的输入字段,其中一个keyup事件触发了DataTables的过滤功能.使用css或jquery,您可以隐藏/删除现有的搜索输入字段.或者DataTables可能有删除/不包含它的设置.

在此查看Datatables API文档.

例:

HTML

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

JS

oTable = $('#myTable').DataTable();   //pay attention to capital D, which is mandatory to retrieve "api" datatables' object, as @Lionel said
$('#myInputTextField').keyup(function(){
      oTable.search($(this).val()).draw() ;
})

Answer 2

根据@lvkz评论:

如果您使用带有大写d .DataTable()的数据表(这将返回一个Datatable API对象),请使用以下命令:

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

这是@netbrain的答案.

如果你使用小写d的数据表.dataTable()(这将返回一个jquery对象)使用这个:

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

Answer 3

对于最新版本的 DataTables，您应该按照以下步骤操作：

1-searching选项必须是true.

2-隐藏默认搜索输入：

.dataTables_filter {
    display: none;
}

3-添加新的搜索输入：

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

4- 请求搜索：

$('#search').keyup(function() {
    var table = $('.table-meetups').DataTable();
    table.search($(this).val()).draw();
});

Answer 4

您可以使用此sDom选项.

在其自己的div中使用搜索输入默认:

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

如果你使用jQuery UI(bjQueryUI设置为true):

sDom: '<"search-box"r><"H"lf>t<"F"ip>'

上面的内容将把search/filtering input元素放入它自己div的类中,这个类名search-box于实际表之外.

即使它使用其特殊的简写语法,它实际上可以使用你抛出的任何HTML.

Answer 5

这个帮助我获得DataTables版本1.10.4,因为它的新API

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

Answer 6

更新的版本具有不同的语法:

var table = $('#example').DataTable();

// #myInput is a <input type="text"> element
$('#myInput').on('keyup change', function () {
    table.search(this.value).draw();
});

请注意,此示例使用table首次初始化数据表时指定的变量.如果您没有此变量,只需使用:

var table = $('#example').dataTable().api();

// #myInput is a <input type="text"> element
$('#myInput').on('keyup change', function () {
    table.search(this.value).draw();
});

自:DataTables 1.10

- 来源:https://datatables.net/reference/api/search()

Answer 7

我有同样的问题。

我尝试了所有发布的替代方案，但没有成功，我使用了一种不正确但效果很好的方法。

示例搜索输入

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

jquery代码

$('#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();
});

Answer 8

我想在@netbrain 的答案中添加一件事，以防您使用服务器端处理（请参阅服务器端选项）。

数据表默认执行的查询限制（请参阅searchDelay选项）不适用于.search()API 调用。您可以通过以下方式使用$.fn.dataTable.util.throttle()取回它：

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);
});