CODEWITHSUNDEEP
phpjqueryhtmlajax
itsme
itsme

Reputation: 400

using jquery ajax how to display searched data displayed into table

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;
 ?>

Upvotes: 0

Views: 906

Answers (1)

user6778410
user6778410

Reputation:

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

Upvotes: 1

Related Questions