CODEWITHSUNDEEP
javascriptphpjquery
johnclyden
johnclyden

Reputation: 15

How to show "No record(s) found" if I search that is not in the table?

I would like show "No Record(s) Found" if I search something that is not on the table. Can someone show me a javascript code on how can I achieve that? I am not using any plugins cause I am not familiar with those.

        <table class="table table-bordered table-hover">
        <thead class="table-light">
            <tr>
            <th scope="col">Image</th>
            <th scope="col">Product</th>
            <th scope="col">Price</th>
            <th scope="col">Quantity</th>
            <th scope="col">QR Code</th>
            <th colspan="2" scope="col"></th>
            </tr>
        </thead>
        <tbody id="myTable">
            <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>100</td>
            <td>QR</td>
            <td width="30px"><a href="#"><a class="btn btn-primary btn-sm" href="#" role="button">Details</a></td>
            <td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>
            </tr>
            <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>100</td>
            <td>QR</td>
            <td width="30px"><a href="#"><a class="btn btn-primary btn-sm" href="#" role="button">Details</a></td>
            <td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>
            </tr>
            <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>100</td>
            <td>QR</td>
            <td width="30px"><a href="#"><a class="btn btn-primary btn-sm" href="#" role="button">Details</a></td>
            <td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>
            </tr>
            <tr id="noRecordTR" class='notfound'>
            <td colspan='7'>No record found</td>
            </tr>
        </tbody>
        </table>

This is my HTML file where the table is located...

    <script src="__assets/js/jquery-3.5.1.min.js"></script>
    <script src="__assets/js/bootstrap.bundle.min.js"></script>
    

     <script>
        $(document).ready(function(){
        $("#myInput").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $("#myTable tr").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });
        });

    </script>

And this is my javascript file. I know I have to put some js but I don't know what I am going to put. Thank you.

Upvotes: 0

Views: 258

Answers (1)

epascarello
epascarello

Reputation: 207501

So check to see any rows are visible after hiding them

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
    $("#noRecordTR").toggle(!$("#myTable tr:visible").length);
  });
});
.notfound {
   display: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="myInput" />

<table class="table table-bordered table-hover">
  <thead class="table-light">
    <tr>
      <th scope="col">Image</th>
      <th scope="col">Product</th>
      <th scope="col">Price</th>
      <th scope="col">Quantity</th>
      <th scope="col">QR Code</th>
      <th colspan="2" scope="col"></th>
    </tr>
  </thead>
  <tbody id="myTable">
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>100</td>
      <td>QR</td>
      <td width="30px"><a href="#"><a class="btn btn-primary btn-sm" href="#" role="button">Details</a></td>
      <td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>100</td>
      <td>QR</td>
      <td width="30px"><a href="#"><a class="btn btn-primary btn-sm" href="#" role="button">Details</a></td>
      <td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>100</td>
      <td>QR</td>
      <td width="30px"><a href="#"><a class="btn btn-primary btn-sm" href="#" role="button">Details</a></td>
      <td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>
    </tr>
    <tr id="noRecordTR" class='notfound'>
      <td colspan='7'>No record found</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions