jquery - 数据表 - 在表加载时仅显示输入框

Question

我目前正在开发一个包含使用数据表的网站。经过大量定制后，它看起来很像常规的 SERP。

我想要实现的功能:在页面加载时，仅应显示输入框，并且应隐藏数据行，直到输入搜索字符串。

所以它实际上应该像您在已知搜索引擎上看到的那样。我没有在数据表论坛或此处找到有关信息。

它尝试使用jQuery keypress()，但没有成功。我尝试在按键时隐藏表格，但根本不起作用(只是为了开始)。

$("#inputbox").keypress(function () {
      $("table.display").css("display":"none");
    });

但是切换效果很好:

$("#button").click(function () {
      $("table.display").slideToggle();
    });

所以我猜问题出在输入框和按键功能上。

很高兴在这里得到一些反馈。

Answer 1

类似这样的东西吗？

$('table tr').hide();
$('input').keypress(function(e) {
    $('table td:contains("'+String.fromCharCode(e.charCode)+'")').closest('tr').show();
});

注释:

您需要在“callback”函数中传递事件(此处为“e”，但您可以将其命名为“event”以获取按下了哪个键

只要按下某一行中存在的字符，此特定示例就会显示整行。

编辑如果您想使用数据表插件过滤，您可以在“数据表”表时执行此操作:

var yourDataTable = $('#yourDataTable').dataTable({...});
var dummySearchString = 'this.will.never.be.found.mwhahahahhaaa';
yourDataTable.fnFilter(dummySearchString);
$('.dataTables_filter input').css('color', 'white');
$('.dataTables_wrapper').delegate('.dataTables_filter input', 'focus', function () {
    if (this.value === dummySearchString) 
    {
        this.value='';
        $(this).css('color', 'black');    
        yourDataTable.fnFilter('');  // only if you want the table to appear when you click the search field
    }
});

基本上，在表格被“数据化”之后，我们要求插件应用搜索(我们要求它搜索“不存在”的值)。因此，该插件“隐藏”所有行。为了真正好看，文本的颜色设置为白色，因此它不会显示在输入框中。