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