bootstrap表格過濾器 - 如何添加「找不到匹配的記錄」行時沒有結果？

Question

我用下面的代碼片段http://jsfiddle.net/giorgitbs/52aK9/1/：

$(document).ready(function() { 

(function ($) { 

    $('#filter').keyup(function() { 

     var rex = new RegExp($(this).val(), 'i'); 
     $('.searchable tr').hide(); 
     $('.searchable tr').filter(function() { 
      return rex.test($(this).text()); 
     }).show(); 

    }) 

}(jQuery)); 
}); 

這個偉大工程。但是，如果沒有結果而不是空白表格，我該如何顯示包含文字「找不到匹配記錄」的行？

Answer 1

我會做這樣的事情。首先，我在表中添加一個（默認情況下隱藏）行以顯示沒有數據。然後在jQuery中，檢查可見的行數。如果它是0，則顯示隱藏的行。

$(document).ready(function() { 
 

 
    (function ($) { 
 

 
     $('#filter').keyup(function() { 
 
      var rex = new RegExp($(this).val(), 'i'); 
 
      $('.searchable tr').hide(); 
 
      $('.searchable tr').filter(function() { 
 
       return rex.test($(this).text()); 
 
      }).show(); 
 
      $('.no-data').hide(); 
 
      if($('.searchable tr:visible').length == 0) 
 
      { 
 
       $('.no-data').show(); 
 
      } 
 

 
     }) 
 

 
    }(jQuery)); 
 

 
});

.no-data { 
 
    display: none; 
 
    text-align: center; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="input-group"> <span class="input-group-addon">Filter</span> 
 

 
    <input id="filter" type="text" class="form-control" placeholder="Type here..."> 
 
</div> 
 
<table class="table table-striped"> 
 
    <thead> 
 
     <tr> 
 
      <th>Code</th> 
 
      <th>Name</th> 
 
      <th>Default</th> 
 
      <th>Status</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody class="searchable"> 
 
     <tr class="no-data"> 
 
      <td colspan="4">No data</td> 
 
     </tr> 
 
     <tr> 
 
      <td>EUR</td> 
 
      <td>EURO</td> 
 
      <td></td> 
 
      <td>Active</td> 
 
     </tr> 
 
     <tr> 
 
      <td>GBP</td> 
 
      <td>Pound</td> 
 
      <td></td> 
 
      <td>Active</td> 
 
     </tr> 
 
     <tr> 
 
      <td>GEL</td> 
 
      <td>Georgian Lari</td> 
 
      <td><span class="glyphicon glyphicon-ok"></span> 
 
      </td> 
 
      <td>Active</td> 
 
     </tr> 
 
     <tr> 
 
      <td>USD</td> 
 
      <td>US Dollar</td> 
 
      <td></td> 
 
      <td>Active</td> 
 
     </tr> 
 
    </tbody> 
 
</table>