如何显示“找不到记录”表过滤器中的meassage [英] How to show "No Record Found" meassage in Table filter

问题描述

我在两张桌子的基础上在我的桌子上使用过滤器。过滤器正在运行但我想显示No Recod Found消息，如果没有值匹配。
以下是示例演示：

I'm applying filter on my table on the basis of two tds. Filter is working but I want to show a No Recod Found message, if there is no value match. Here is a sample demo:

$("#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来解决这个问题。

You can also mention another simple way to filter a table and achieve this. I only want to acieve this with jQuery and JS no plugin please.

推荐答案

只需添加一个新的tr找不到记录的消息，显示：无。
jsfiddle在这里：

just add a new tr with a message of No Record Found and with display:none. jsfiddle is here:

演示

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

JavaScript

JavaScript

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

这篇关于如何显示“找不到记录”表过滤器中的meassage的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！