如何在表筛选器中显示"No Record Found"度量

Question

我正在根据两个 tds 对我的表应用过滤器。过滤器正在工作，但如果没有值匹配，我想显示"找不到 Recod "消息。 下面是一个示例演示：

$("#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";
}
}
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-6 col-md-3 p0">
<div class="fixed-table-toolbar">
<div class="bars pull-left">
<div id="toolbar">
<select class="form-control input_billing" id="earning1">
<option value="">Earning</option>
<option value="100">100</option>                                               <option value="150">150</option>                                               <option value="250">250</option>
</select>
</div>
</div>
<div class="bars pull-left">
<div id="toolbar">
<select class="form-control input_billing" id="scoring1">
<option value="">Scoring</option>
<option value="70">70</option>                                               <option value="90">90</option>
<option value="100">100</option>
</select>
</div>
</div>
<button id="filter" class="btn btn-success" style="margin-top:8px;" type="button">Filter</button>
</div>
</div>
<table class="table table-condensed" id="mastermindTable">
<thead>
<tr>
<th width="18%" align="left">Name</th>
<th width="26%" align="left">Email </th>
<th width="20%" align="left">Expertise</th>
<th width="16%" align="left">Earning</th>
<th width="16%" align="left">Scoring</th>
<th width="4%" align="left">Status</th>
</tr>
</thead>
<tbody id="mastermindTableBody">
<tr> 
<td>Ammar</td>
<td>[e-mail]</td>
<td>PHP</td>
<td>100</td>
<td>70</td>
<td>Active</td>                    
</tr>
<tr> 
<td>Arsnel</td>
<td>[e-mail]</td>
<td>Larave</td>
<td>150</td>
<td>90</td>
<td>Active</td>                    
</tr>
<tr> 
<td>Abeera</td>
<td>[e-mail]</td>
<td>CI</td>
<td>250</td>
<td>110</td>
<td>InActive</td>                    
</tr>
</tbody>
</table>

您还可以提及另一种简单的方法来筛选表并实现此目的。 我只想用jQuery和JS来解决这个问题，请不要使用插件。

Answer 1

只需添加一个带有"未找到记录"和"显示：无"消息的新tr。 JSFIDDLE在这里：

演示

<tr id="noRecordTR" style="display:none"> 
<td>No Record Found</td>                              
</tr>

JavaScript

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

Answer 2

很简单。只需在FOR函数下添加此代码即可。

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

JSFIDDLE 从您的原始帖子

更新

或者，您可以编写/使用任何处理"未找到行"消息的表的通用函数。

功能

$.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();
}
};

您需要在初始化/页面加载时调用带有表的函数。 然后，如果您有任何操作/过滤器侦听器，只需将调用添加到侦听器中即可。

$(table_selector).AddNoRowsFound();

您还需要将带有消息的行添加到表>正文中。

<tr data-no-results-found style="display:none"><td colspan="6">NO RESULTS FOUND</td></tr>

对于任何表来说，这都是通用的。

JSFIDDLE2

Answer 3

您是否尝试过在表格后绘制一个简单的div，内容为"未找到Recod消息"并且不显示任何内容？如果您有结果 ->添加显示无样式，否则 ->删除显示无样式。