如何获取数据表中搜索框中输入的值

问题描述 投票:0回答:6

如何获取数据表中搜索框中输入的值。 有没有办法获取数据表中搜索框中输入的值?

jquery datatables
6个回答
50
投票

如果您只想在执行搜索时检查值 [dataTables 1.10.x] :

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

$('#example').on('search.dt', function() {
    var value = $('.dataTables_filter input').val();
    console.log(value); // <-- the value
}); 

如果你想在搜索前检查值,并且能够取消搜索,你必须取消绑定默认的搜索框事件并创建你自己的事件,就像这样 - 仅当用户输入超过3个字符时才搜索:

$('.dataTables_filter input').unbind().keyup(function() {
    var value = $(this).val();
    if (value.length>3) {
        table.search(value).draw();
    } 
});

演示 -> http://jsfiddle.net/pb0632c3/

要完全重置搜索/过滤器,就像用户删除了搜索词一样:

if (value.length==0) table.search('').draw();

29
投票

是的,有。您调用不带参数的搜索方法来获取搜索词

var query = dataTable.search()

https://datatables.net/reference/api/search()

获取当前应用的全局搜索。如果有多个 在 API 上下文中的表中,第一个表的搜索词将为 回。如果您需要不同的搜索词,请使用 table() API 上下文中的表。


3
投票

dataTable api

中所述
    var table = $('.datatable').DataTable();


     $('.datatable').on('search.dt', function (e, settings) {
       table.search( this.value ).draw();
    })

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

1
投票

您可以对所有数据表版本执行类似的操作 我们在这里所做的是跟踪搜索输入字段,然后仅获取其值 使用此方法无需使用数据表 api

$('input[type="search"]').on( 'keyup', function () {
            console.log($(this).val());
} );

0
投票

尝试这个函数来检测按键,然后绘制DataTablee。

$('#search').on('keyup change', function () {
    var table = $('#example').DataTable();
    table.api().search($(this).val()).draw();
});


0
投票

在要搜索的输入附近添加无显示范围标签

<td><input value="kevink2k19" class="form-control">
    <span style="display:none"> kevink2k19</span>
</td>
© www.soinside.com 2019 - 2024. All rights reserved.