如何在表格filter中显示“No Record Found”meassage

我在两张桌子的基础上在我的桌子上使用filter。 filter正在工作但我想显示No Recod Found消息，如果没有值匹配。 这是一个示例演示：

$("#filter").click(function () { var tdScoring,tdEarning; var scoring=$("#scoring1").val(); var earning = $("#earning1").val(); table = document.getElementById("mastermindTable"); tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { tdScoring = tr[i].getElementsByTagName("td")[4]; tdEarning = tr[i].getElementsByTagName("td")[3]; if (tdScoring || tdEarning) { if (tdScoring.innerHTML.indexOf(scoring) == 0 && tdEarning.innerHTML.indexOf(earning) == 0) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } }); 

  
 
 
 
  Earning 100 150 250  
 
 
 
  Scoring 70 90 100  
 
 Filter 
 
 
 
 
 
Name
 
Email 
 
Expertise
 
Earning
 
Scoring
 
Status
 
 
 
 
 
Ammar
 
[e-mail]
 
PHP
 
100
 
70
 
Active
 
 
 
Arsnel
 
[e-mail]
 
Larave
 
150
 
90
 
Active
 
 
 
Abeera
 
[e-mail]
 
CI
 
250
 
110
 
InActive
 
 
  

您还可以提及另一种过滤表并实现此目的的简单方法。 我只想用jQuery和JS没有插件来解决这个问题。

Answer 1

只需添加一个新的tr，其中包含No Record Found和display：none的消息。 jsfiddle在这里：

演示

   No Record Found  

JavaScript的

  if(hidden_rows==rows){ for (i = 2; i < tr.length; i++) { tr[i].style.display = "none"; } document.getElementById('noRecordTR').style.display = ""; } 

Answer 2

这很简单。 只需在FORfunction下添加此代码即可。

 // end your for $('#mastermindTable tbody tr[data-no-results-found]').remove(); if($('#mastermindTable tbody tr:visible').length === 0) { $('#mastermindTable tbody').append('NO RESULTS FOUND'); } 

来自原帖的JSFIDDLE

UPDATE

或者你可以编写/使用通用函数任何处理“没有找到行”消息的表。

function

 $.fn.AddNoRowsFound = function() { if($(this).find('tbody tr:not([data-no-results-found]):visible').length > 0) { $(this).find('tbody tr[data-no-results-found]').hide(); } else { $(this).find('tbody tr[data-no-results-found]').show(); } }; 

你需要在init / page load上使用表调用函数。 然后，如果您有任何操作/filter，则只需将调用添加到侦听器中。

 $(table_selector).AddNoRowsFound(); 

而且你还需要在表> body中添加带消息的行。

 NO RESULTS FOUND 

这对任何桌子来说都是通用的。

JSFIDDLE2

Answer 3

你有没有尝试在你的桌子后面写一个简单的div，内容为“No Recod Found message”并且没有显示？ 如果你有结果 – >添加display none样式，否则 – >删除display none样式。