如何在Datatables中获取搜索框中输入的值

Question

如何在Datatables中获取搜索框中输入的值

31

如何在Datatables中获取搜索框中输入的值。是否有一种方法可以在Data Tables中获取搜索框中输入的值？

- jessi

这是您所询问的内容吗？请更具体地描述。 - PM 77-1

感谢您的回复。我正在使用搜索功能，并希望获取在数据表搜索框中输入的确切文本，我需要在搜索框中的文本被清除时发送服务器端请求。因此，我正在寻找一种方法来获取输入的文本并检查其长度是否为零，然后发送服务器端请求。我希望我表述清楚了。 - jessi

1

我认为你可能想把 jQuery 添加到你的标签列表中，以吸引更多的人群。 - PM 77-1

在Google中搜索“datatables pull contents of search box”，第一名！完美！ - EFH

5个回答

29

有的。您可以调用无参数的搜索方法来获取搜索词。

var query = dataTable.search()

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

获取当前应用的全局搜索。如果在API的上下文中有多个表格，则将返回第一个表格的搜索词。如果需要 API 上下文中另一个表格的搜索词，请使用 table()。

- Peter Chaula

1

谢谢，其他答案太复杂了 :) 这个很好用 - danday74

@danday74，是的，同意，我在其他答案中也推荐过这样做。但是如果你看一下问题，OP想要搜索框的内容。.search()只会给你当前的搜索词，如果有的话，而那可能是基于程序或插件的搜索，而不仅仅是搜索框的内容。 - davidkonrad

@davidkonrad，“如何获取输入的值...”请阅读问题标题。或者我的英语只是极其糟糕。 - Peter Chaula

@peterchaula，天啊，那太老了 :) 我指的是下面OP问题的评论：“我有一个要求，在搜索框中清除文本时发送服务器端请求。因此，我正在寻找一种获取输入文本并检查长度是否为零并发送服务器端请求的方法”。新年快乐！ - davidkonrad

@davidkonrad 是的，那已经过时了。新年快乐！ - Peter Chaula

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

- Herbi Shtini

1

你可以像这样做，适用于所有datatable版本。我们所做的是跟踪搜索输入字段，然后仅获取其值，无需使用datatable api即可使用此方法。

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

- Jasbin Karki

0

尝试使用此函数来检测按键并绘制数据表格。

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

- Rock

2

虽然这段代码片段可能解决了问题，但包括解释真的有助于提高您的帖子质量。请记住，您正在为未来的读者回答问题，而这些人可能不知道您的代码建议原因。 - Derek Brown

我认为这不会起作用，在dt中，搜索输入类型并没有创建一个名为search的id。 - Manza

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- davidkonrad · Accepted Answer

如果你只想在进行搜索时检查数值 [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();