Dynamically fill a html table using ajax or php from mysql DB when i click the search button

Question

I have a table which initially get filled while page loading.Now,I have a search button to filter the table where i have post function to filter the search results but it is loading every-time i search through the text-box which is not good.I need a ajax or J son or JavaScript code to load the grid each time it is searched.

My table:

      <table align="center" class="sortable" border="1" width="900px">
        <tr > 
      <td class="sorttable_nosort" style=" font-weight:bold; text-align:center">Select</td>
      <td class="sorttable_nosort" style=" font-weight:bold; text-align:center">Action</td>
      <td style=" font-weight:bold;">Product Code</td>
      <td style=" font-weight:bold;">Warranty Periods In Months</td>
      <td style=" font-weight:bold;">ProRata Period In Months </td>
      <td style=" font-weight:bold;">Manufacturer Date</td>
      <td style=" font-weight:bold;">Applicable Form Date</td></tr>
     <?php
          // This while will loop through all of the records as long as there is another record left. 
          while( $record = mysql_fetch_array($query))
        { // Basically as long as $record isn't false, we'll keep looping.
          // You'll see below here the short hand for echoing php strings.
          // <?=$record[key] - will display the value for that array.
        ?>

         <tr>
         <td bgcolor="#FFFFFF" style=" font-weight:bold; text-align:center"><input name="checkbox[]" type="checkbox" id="checkbox[]" value="<? echo $record['ProductCode']."~".$record['ManufactureDate']; ?>"></td>
         <td bgcolor="#FFFFFF" style=" font-weight:bold; text-align:center"> <a style="color:#FF2222" name="edit" href="productwarrantymaster.php?<?php if(($row['editrights'])=='Yes') { echo 'ProductCode='; echo $record['ProductCode'];echo '&ManufactureDate=';echo $record['ManufactureDate'];} else echo 'permiss'; ?>">Edit</a></td>
         <td  bgcolor="#FFFFFF"><?=$record['ProductCode']?>  </td>
         <td  bgcolor="#FFFFFF"  ><?=$record['WarrantyPeriod']?></td>
        <td  bgcolor="#FFFFFF"> <?=$record['ProRataPeriod']?> </td>
         <td  bgcolor="#FFFFFF"  >  <?=$record['ManufactureDate']?> </td>
        <td  bgcolor="#FFFFFF" >  <?=$record['ApplicableFormDate']?>   </td></tr>

      <?php
          }
      ?>
    </table>

I have used the pagination code too to fill the grid which is also added here.

My POST function:

if(isset($_POST['Search']))
{
if(isset($_POST['codes'])||isset($_POST['names']))
{
    if(empty($_POST['codes'])&&empty($_POST['names']))
    {
        ?>
            <script type="text/javascript">
            alert("Enter text Field!!");document.location='productwarrantymaster.php';
            </script>
            <?
    }
    else
    {
    if(!empty($_POST['codes'])&&!empty($_POST['names']))
    {
        $condition="SELECT * FROM productwarranty WHERE ProductCode like'%".$_POST['codes']."%' AND ManufactureDate like'".
        $_POST['names']."%'";

    }
    else if(!empty($_POST['codes'])&&empty($_POST['names']))
    {
        $condition="SELECT * FROM productwarranty WHERE ProductCode like'%".$_POST['codes']."%'";

    }
    else if(!empty($_POST['names'])&&empty($_POST['codes']))
    {
        $condition="SELECT * FROM productwarranty WHERE ManufactureDate like'".$_POST['names']."%'";

    }
    else
    {

        $condition="SELECT * FROM productwarranty WHERE 1";
    }

    $refer=mysql_query($condition);
    $myrow1 = mysql_num_rows($refer);
    //mysql_fetch_array($query);

    $page = (int) (!isset($_GET["page"]) ? 1 : $_GET["page"]);
        $limit = 10;
        $startpoint = ($page * $limit) - $limit;
        //to make pagination
        $statement = "productwarranty";
         //show records
         $starvalue = $myrow1;
       $query = mysql_query("{$condition} LIMIT {$startpoint} , {$limit}");
        if($myrow1==0)  
        {
            ?>
            <script type="text/javascript">
            alert("Entered keyword not found!!");document.location='productwarrantymaster.php';
            </script>
            <?

        }
    }
}

}

My Search Table:

        <div style="width:80px; height:30px; float:left; margin-left:3px; margin-top:16px;" >
                                <label>Product Code</label>
                               </div>
                               <div style="width:145px; height:30px;  float:left; margin-left:3px; margin-top:16px;">
                                 <input type="text" name="codes" value=""/>
                               </div>
                             <!--Row1 end-->  

                               <!--Row2 -->  
                               <div style="width:80px; height:30px; float:left; margin-left:3px; margin-top:9px;">
                                  <label>Manufacturer Date</label>
                               </div>
                               <div style="width:145px; height:30px;  float:left; margin-left:3px; margin-top:16px;" >
                                 <input type="text"  id="searchdate" name="names" value=""/>
                               </div>
                             <!--Row2 end-->

                             <div style="width:83px; height:32px; float:left; margin-top:16px;">
                                <input type="submit" name="Search" value="" class="button1"/>
                               </div>

Kindly help me out for this issue. Thanks in Advance:P

Answer 1

jQuery is very good at loading data

This is the general direction you can go to achieve this:

1. Modify your php to output JSON: http://php.net/manual/en/function.json-encode.php
   The php script stands alone. Calling the script by itself in the browser will print the JSON to the screen. jQuery will call this script and gather the output.
2. Remove the existing table: (Something like this) $('#mytable').remove();
   Clear the table from the front-side. In the next step you will add a new one.
   
3. Getting the JSON:: http://api.jquery.com/jQuery.getJSON/
   The link above shows how to call the php file and parse the JSON
4. Rebuild the table with jQuery. The link above also shows how to output data.