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>amr@gmail.com</td>
                      <td>PHP</td>
                      <td>100</td>
                      <td>70</td>
                     <td>Active</td>                    
                  </tr>
                  <tr> 
                      <td>Arsnel</td>
                      <td>ars@gmail.com</td>
                      <td>Larave</td>
                      <td>150</td>
                      <td>90</td>
                     <td>Active</td>                    
                  </tr>
                  <tr> 
                      <td>Abeera</td>
                      <td>abr@gmail.com</td>
                      <td>CI</td>
                      <td>250</td>
                      <td>110</td>
                     <td>InActive</td>                    
                  </tr>
              </tbody>
            </table>

您还可以提到另一种简单的方法来过滤表并实现此目的。我只想通过jQuery和JS来实现此目的，而无需插件。

Answer 1

只需添加一条新的tr，并显示一条消息“ No Record Found”（未找到记录），并显示：none。 jsfiddle在这里：

demo

    <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

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

如何在表格过滤器中显示“未找到记录”消息

3 个答案: