當RowFilter不匹配時顯示消息

我正在爲我的表創建一個帶有JavaScript的RowFilter，一切正常，但是當來自搜索輸入的文本不匹配時我想顯示一條消息（未找到結果...在< TD>表內），但我不知道到底該怎麼做，這是我的HTML：當RowFilter不匹配時顯示消息

<div class="container"> 
    <input class="form-control" type="text" id="buscar" placeholder="search..." /> 
    <hr /> 
    <div class="row"> 
    <table class="table table-striped" id="Tabla"> 
     <thead> 
     <tr> 
      <td>ID</td> 
      <td>Name</td> 
      <td>Level</td> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <td>1</td> 
      <td>This is my name</td> 
      <td>Level Master 45</td> 
     </tr> 
     <tr> 
      <td>2</td> 
      <td>This is my name number 2</td> 
      <td>Level Master 1</td> 
     </tr> 
     <tr> 
      <td>3</td> 
      <td>This is my name number 3</td> 
      <td>Level Mastermind 4</td> 
     </tr> 
     </tbody> 
    </table> 

    <hr /> 

    </div> 

</div>

這裏是JS：

這裏是一個演示在JSFiddle

Working Example

我試圖在js函數中while的else部分顯示警報，但警告顯示很多次（while row = table.rows [r ++]）。提前致謝。

來源

2016-08-25 Francisco Fernandez

這是您的原始JSFiddle的一個分支，它在沒有搜索結果時顯示消息。

https://jsfiddle.net/reid_horton/yg98jqcj/

首先，添加要顯示在上面的HTML（或）表格中的元素。

<div id="no-results"> 
    No results! 
</div>

將其設置爲默認隱藏狀態。

#no-results { 
    display: none; 
}

要檢測何時不存在搜索結果，請將您的循環更改爲此。

var didMatch = false; 
var r = 0; 
while (row = table.rows[r++]) { 
    if (row.innerText.toLowerCase().indexOf(texto) !== -1) { 
    row.style.display = null; 
    didMatch = true; 
    } else { 
    row.style.display = 'none'; 
    } 
} 
if (!didMatch) { 
    noResults.style.display = 'block'; 
} else { 
    noResults.style.display = 'none'; 
}

didMatch變量用於跟蹤結果是否匹配。如果屬實，則隱藏#no-results，如果爲false，則顯示它。

來源

2016-08-25 22:05:23

謝謝老兄！這個作品 –

試試吧

$(document).ready(function(){ 

    $("#buscar").on("input",function(){ 

     $value = $(this).val(); 

     $("tr").not(":first").hide(); 

     $len = $("td:contains(" + $value + ")").closest("tr").show().length; 

     if($len < 1) 
      $(".no").show(1000); 

     else 
      $(".no").hide(); 


    }) 
})

最終代碼：

<html> 
 
    <title>This is test</title> 
 
    <head> 
 
     <style> 
 
      .no { 
 
       border: 1px solid gray; 
 
       text-align: center; 
 
       background-color: skyblue; 
 
       padding: 5px; 
 
       color: #fff; 
 
       display: none; 
 
      } 
 
     </style> 
 
    </head> 
 
    <body> 
 
     <div class="container"> 
 
    <input class="form-control" type="text" id="buscar" placeholder="search..." /> 
 
    <hr /> 
 
      <div class="no">No Result</div> 
 
    <div class="row"> 
 
    <table class="table table-striped" id="Tabla"> 
 
     <thead> 
 
     <tr> 
 
      <td>ID</td> 
 
      <td>Name</td> 
 
      <td>Level</td> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>This is my name</td> 
 
      <td>Level Master 45</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2</td> 
 
      <td>This is my name number 2</td> 
 
      <td>Level Master 1</td> 
 
     </tr> 
 
     <tr> 
 
      <td>3</td> 
 
      <td>This is my name number 3</td> 
 
      <td>Level Mastermind 4</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 

 
    <hr /> 
 

 
    </div> 
 

 
</div> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script> 
 
$(document).ready(function(){ 
 
    
 
    $("#buscar").on("input",function(){ 
 
     
 
     $value = $(this).val(); 
 
     
 
     $("tr").not(":first").hide(); 
 
     
 
     $len = $("td:contains(" + $value + ")").closest("tr").show().length; 
 
     
 
     if($len < 1) 
 
      $(".no").show(1000); 
 
     
 
     else 
 
      $(".no").hide(); 
 
     
 
         
 
    }) 
 
}) 
 
     </script> 
 
    </body> 
 
</html>

來源

2016-08-25 22:20:44 Ehsan

@ F.Flores，檢查我的答案！ – Ehsan

不錯的代碼！多謝兄弟 –

當RowFilter不匹配時顯示消息

回答

相關問題