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

Posted 2023-05-07

【中文标题】如何在数据表中的搜索框中输入值

【英文标题】：How to get value entered in search box In Datatables

【发布时间】：2014-12-22 19:42:56

【问题描述】：

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

【问题讨论】：

你问的是this吗？请更具体。

感谢您的回复。我正在使用搜索功能，我想获得在数据表搜索框中输入的确切文本，我需要在文本输入时发送服务器端请求搜索框已清除。所以我正在寻找一种方法来获取输入的文本并检查长度是否为零并发送服务器端请求。我希望我很清楚。

我认为您可能希望将 jQuery 添加到标签列表中以吸引更多人群。

#1 在 Google 中搜索“数据表拉取搜索框内容”的结果。完美！

【参考方案1】：

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

【讨论】：

table.column().search(value).draw(); 不应该是table.search(value).draw();？

@MárciosouzaJúnior，你是对的。谢谢！已更改文本和小提琴。奇怪的是，我在示例中使用了column()。

@davidkonrad 试试dataTable.search()。我不确定它是否记录在案

【参考方案2】：

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

var query = dataTable.search()

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

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

【讨论】：

谢谢，其他答案太复杂了 :) 效果很好

@danday74，是的，同意，我也建议在其他分析器中这样做。但是，如果您查看问题，OP 想要搜索框的内容。 .search() 只是给你当前的搜索词，如果有的话，这可能是一个程序或基于插件的搜索，而不仅仅是搜索框的内容。

@davidkonrad，“如何获取输入的值......”。阅读问题的标题。或者也许我的英语非常糟糕

@peterchaula，哎呀，那是旧的 :) 我指的是 OP 问题下面的评论：“，我需要在搜索文本时发送服务器端请求 框已清除。所以我正在寻找一种方法来获取输入的文本并检查长度是否为零并发送服务器端请求“。新年快乐！

@davidkonrad 是的，那是旧的。新年快乐！

【参考方案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();
    );

【参考方案4】：

试试这个函数检测按键，然后绘制DataTablee。

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

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。

【参考方案5】：

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

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