Tuesday, 23 February 2016

How to Load More Data using Ajax Jquery



In this post we are going to learn load more data using Ajax JQuery in PHP with MySql. This is very common feature which is used in big social networking site like facebook, twitter, youtube etc. In this feature data load without page refresh. Data load from database using Ajax function call. With Ajax function call it get data from database and display on front end without page refresh. This fucntionality is very useful in load data step by step without page refresh and pagination.



Working Code


load_more.php


 <?php  
 $connect = mysqli_connect("localhost", "root", "", "test_db");  
 $sql = "SELECT * FROM tbl_video LIMIT 2";  
 $result = mysqli_query($connect, $sql);  
 $video_id = '';  
 ?>  
 <html>  
      <head>  
           <title></title>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
      </head>  
      <body>  
           <div class="container">  
                <br />  
                <br />  
                <br />  
                <div class="table-responsive">  
                     <h2 align="center">Load More Data using Ajax Jquery</h2><br />  
                     <table class="table table-bordered" id="load_data_table">  
                          <?php  
                          while($row = mysqli_fetch_array($result))  
                          {  
                          ?>  
                               <tr>  
                                    <td><?php echo $row["video_title"]; ?></td>  
                               </tr>  
                          <?php  
                               $video_id = $row["video_id"];  
                          }  
                          ?>  
                          <tr id="remove_row">  
                               <td><button type="button" name="btn_more" data-vid="<?php echo $video_id; ?>" id="btn_more" class="btn btn-success form-control">more</button></td>  
                          </tr>  
                     </table>  
                </div>  
           </div>  
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      $(document).on('click', '#btn_more', function(){  
           var last_video_id = $(this).data("vid");  
           $('#btn_more').html("Loading...");  
           $.ajax({  
                url:"load_data.php",  
                method:"POST",  
                data:{last_video_id:last_video_id},  
                dataType:"text",  
                success:function(data)  
                {  
                     if(data != '')  
                     {  
                          $('#remove_row').remove();  
                          $('#load_data_table').append(data);  
                     }  
                     else  
                     {  
                          $('#btn_more').html("No Data");  
                     }  
                }  
           });  
      });  
 });  
 </script>  

load_data.php


 <?php  
 $output = '';  
 $video_id = '';  
 sleep(1);  
 $connect = mysqli_connect("localhost", "root", "", "test_db");  
 $sql = "SELECT * FROM tbl_video WHERE video_id > ".$_POST['last_video_id']." LIMIT 2";  
 $result = mysqli_query($connect, $sql);  
 if(mysqli_num_rows($result) > 0)  
 {  
      while($row = mysqli_fetch_array($result))  
      {  
           $video_id = $row["video_id"];  
           $output .= '  
                <tbody>  
                <tr>  
                     <td>'.$row["video_title"].'</td>  
                </tr></tbody>';  
      }  
      $output .= '  
                <tbody><tr id="remove_row">  
                     <td><button type="button" name="btn_more" data-vid="'. $video_id .'" id="btn_more" class="btn btn-success form-control">more</button></td>  
                </tr></tbody>  
      ';  
      echo $output;  
 }  
 ?>  

0 comments:

Post a Comment