Question

我目前正在开发一个包含使用数据表的网站。经过多次定制后，它看起来就像一个普通的SERP。

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

所以它实际应该像你在已知的搜索引擎上看到它一样。我没有找到关于datatables论坛或这里的信息。

尝试使用 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();
});

备注：

您需要在“回调”功能中传递事件（此处为“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 } });

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

Answer 2

您可以根据有行来隐藏/显示表：

$('table').hide();
$('#inputbox').keyup(function(e) {
   var numRows = $('table tr').length;
   if(numRows >0){
    $('table').show();
   }else{
     $('table').show();    
   }
});

在这种情况下，假设您使用数据表过滤引擎过滤表（这是您应该做的而不是自己过滤数据）

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

2 个答案: