i have been using table filter jquery from w3scool. But how do i add message when no data found [closed]

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

This is the jquery m using.. i dont have much of a knowledge in jquery. Can some one help me on how to show a message of no data found. when there is no result for the search.

This my table.

    <table id="myTable" class="table table-bordered table-striped table-condensed cf">
    <thead class="cf">
     <tr>
    <th style="width:5%">  जिला  </th>
    <th style="display:none;">sno</th>
    <th style="width:10%" class="numeric">विभाग </th>
    <th style="width:9%" class="numeric">नाम </th>
    <th style="width:8%" class="numeric">पद  </th>
    <th style="width:10%" class="numeric">मोबाइल नम्बर  </th>
    <th style="width:10%" class="numeric">कोई अन्य नम्बर  </th>
    <th style="width:15%"> ई-मेल </th>
    <th style="width:25%">पता </th>
    <th style="width:10%" class="numeric">Action</th>
</tr>
</thead>
<tbody id="data">
<?php 
    // Fetch BLocks
 $sql_block = "SELECT * FROM telephone";
 $block_data = mysqli_query($con,$sql_block);
 while($row = mysqli_fetch_assoc($block_data) ){
 $id = $row['sno'];
 $jila = $row['jila'];
 $vibhag = $row['vibhag'];
 $name = $row['name'];
 $post = $row['post'];
 $mobile1 = $row['mobile1'];
 $mobile2 = $row['mobile2'];
 $email = $row['email'];
 $address = $row['address'];                      
?> 
<tr>
<td data-title="Jila"><?=$jila?></td>
<td data-title="ID" style="display:none;"><?=$id?></td>
<td class="numeric" data-title="Vibhag"><?=$vibhag?></td>
<td class="numeric" data-title="Name"><?=$name?></td>
<td class="numeric" data-title="Post"><?=$post?></td>
<td class="numeric"  data-title="Mobile"><?=$mobile1?></td>
<td class="numeric"  data-title="Other No."><?=$mobile2?></td>
<td class="numeric"  data-title="Email"><?=$email?></td>
<td class="numeric"  data-title="Address"><?=$address?></td>
<td class="numeric"  data-title="Operation"><a href="edit-telephone.php?sno=<?=$id?>" onclick="return confirmation()" ><button class="btn btn-primary btn-sm"><i class="fa fa-pencil"></i></button></a><a href="delete-telephone.php?sno=<?=$id?>" onclick="return confirmation()"> <button class="btn btn-danger btn-sm"><i class="fa fa-trash-o "></i></button></a>                                                   
</td>
</tr>
<?php 
$sno=$sno+1;
 }
?>                                              
</tbody>
</table>

This is my data table…where data is fetched through database and searched through the above mentioned jquery. search is working fine.. but how do i show the no data found message when there is no result

Answer

Try this:

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

if(!flag)
    alert('no match found!!');
 });
});

To avoid annoying alerts go to html, after the end of the table, add div:

 <div id="msg" style="display:none">
 </div>

Then change the javascript code to be as the following:

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
  $('#msg').css({'display':'none'});
  var flag = false;
  var value = $(this).val().toLowerCase();
  $("#myTable tr").filter(function() {
  var x = $(this).text().toLowerCase().indexOf(value) > -1;
  if(x == true)
      flag = true;
    $(this).toggle(x);
  });

   if(!flag)
   {
     $('#msg').html("No match found..");
     $('#msg').css({'display':'block'});
   }
   });
 });

Advertisement

Answer