2

我目前正在一个包含使用数据表的网站上工作。经过大量定制后，它看起来很像普通的 SERP。

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

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

它尝试使用jQuery keypress() 但没有奏效。我尝试在按键上隐藏表格，但根本没有用（只是开始）。

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

但是切换工作正常：

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

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

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

4

2 回答 2

1

像这样的东西？

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

笔记：

    您需要在“回调”函数中传递事件（此处为“e”，但您可以将其命名为“事件”以获取按下了哪个键
    只要按下其中一行中存在的字符，此特定示例就会显示整行。

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

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

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

于 2011-11-02T12:49:11.117 回答
0

您可以根据存在行的事实隐藏/显示表格：

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

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

于 2011-11-03T12:15:07.760 回答