using jquery ajax how to display searched data displayed into table

Question

I have created HTML table and displaying data using PHP.Now I want to implement the search operation on that table using jquery ajax.I am new to the jquery and ajax.What I want is if I enter more than 3 characters it should show the records based on the search.I tried some code it is not working.I don't Know the way I tried correct or not please any help would be appreciated.Thanks in Advance.

HTML:

  <input name="search" id="search" type="search">
  <div class="scrollingTable result" style="width:100%;">
  <table id="myTable" class="table table-striped table-bordered table-fixed" 
      cellspacing="0" style="width:100%;padding-top:20px;">
                   <thead>
                      <tr>
                        <th>Name</th>
                        <th>Address</th>
                        <th>Telephone</th>
                        <th>Email</th>
                        <th>GSTIN Number</th>
                        <th>Bankname</th>
                        <th>Account Number</th>
                        <th>IFSC Code</th>
                        <th>Edit</th>
                  </tr>
                </thead>
                      <tbody>
            <?php  if($vlist !=""){
               echo $vlist;
            }else {?>
                        <?php echo  $vndr_list;
          }?>
                      </tbody>
            </table>
    </div>

 this is my jquerycode

<script type="text/javascript">
  $(function(){
     var minlength = 3;
    $("#search").keyup(function(){
      debugger;
    var value=$(this).val();
      if(minlength<value.length){
        $.ajax({
        url: "search.php",
        type: "POST",
        data: {name :value},
        success: function(html){
        $("#myTable").append(html);
      }
      });
      }
    });
    });

 this is my php file search file which is calling in ajax

<?php
require('Assests/connection/connection.php');
$vlist = "";
 if(isset($_POST['name'])){
 $find=$_POST['name'];
 $result = mysqli_query($conn,"SELECT `vndr_id`, s.state as 
state,`vndr_name`, 
`vndr_address`, `vndr_pincode`, `vndr_telephone`, `vndr_mobile`, 
`vndr_mailid`, `vndr_country`, `vndr_gsttin`, `vndr_cstno`, 
`vndr_totaldebit`, 
`vndr_totalcredit`, `vndr_bankname`, `vndr_acno`, `vndr_ifsccode` FROM 
`vendors` vndr INNER JOIN states s ON vndr_state=s.state_id
WHERE vndr_name LIKE '%{$find}%' OR vndr_mailid LIKE '%{$find}%'") or 
DIE(mysqli_error($conn));

while ($row = mysqli_fetch_array($result))
{
        $id          = $row['vndr_id'];
        $vndrname    = $row['vndr_name'];
        $vndraddres  = $row['vndr_address'];
        $vndrpincode = $row['vndr_pincode'];
        $vndrstate   = $row['state'];
        $vndrtlphno  = $row['vndr_telephone'];
        $vndrmobile  = $row['vndr_mobile'];
        $vndrmailid  = $row['vndr_mailid'];
        $vndrcountry = $row['vndr_country'];
        $vndrgst     = $row['vndr_gsttin'];
        $vndrcst     = $row['vndr_cstno'];
        $vndrdebit   = $row['vndr_totaldebit'];
        $vndr_credit = $row['vndr_totalcredit'];
        $vndrbnkname = $row['vndr_bankname'];
        $vndracno    = $row['vndr_acno'];
        $vndrifsc    = $row['vndr_ifsccode'];

        $vlist.="
                                                    <tr>
                                                       <td>$vndrname </td>
                                                       <td>$vndraddres ,$vndrstate - $vndrpincode</td>
                                                       <td>$vndrtlphno , $vndrmobile</td>
                                                       <td> $vndrmailid </td>
                                                       <td> $vndrgst</td>
                                                       <td>$vndrbnkname</td>
                                                       <td>$vndracno </td>
                                                       <td>$vndrifsc</td>
                                                       <td><a href='abc.php?id=$id'><i class='fa fa-edit fa-2x'></i></a></td>
                                                    </tr>
    }                                                ";
   }
    echo   $vlist;
 ?>

What doesn't work? The ajax or the php? Have you checked your browser console to see if the ajax fires? Have you tried your php code separately to make sure it returns a result? ie. don't see a #search input. don't see where you echo $vlist; — Sean
– Sean, Commented Dec 15, 2017 at 5:09
Whats the query that you tried. I understood that you tried something and didn't worked. Please add those. — Mathews Sunny
– Mathews Sunny, Commented Dec 15, 2017 at 5:09
the ajax is not working to call search.php file.if i implement another way like after entering data into text box and click button it working fine.but i want do using ajax call how to do that.thanks for your response. — itsme
– itsme, Commented Dec 15, 2017 at 5:14
jquery and table is in same file.but search .php is different. — itsme
– itsme, Commented Dec 15, 2017 at 5:25

user6778410 · Accepted Answer · 2017-12-15 05:09:50Z

1

For your requirement, it would be better if you use some client side libraries like data table. Check this link https://datatables.net/examples/ajax/simple.html. In this case, you should have better knowledge dealing with json and creating it with php & mysql. Hope this helps. Thanks

answered Dec 15, 2017 at 5:09

user6778410

Sign up to request clarification or add additional context in comments.

4 Comments

user6778410 Over a year ago

was that helpful?

itsme Over a year ago

can't we do by this way.

user6778410 Over a year ago

You can do but you need to have deep knowledge in javascript and dom parsing. As you said, you are new in to it, it is better using libraries. As your experience increases, you can think of writing custom things.

user6778410 Over a year ago

First you try to understand json and manipulating it with javascript. Please do not forget to give an up vote it if really helped you. Thanks

Collectives™ on Stack Overflow

using jquery ajax how to display searched data displayed into table

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related