onscroll pagination in php

onscroll pagination in php

onscroll pagination in php

this post is  on scroll  ajax pagination with php and mysql in vary easy and simple code.It use jquery and ajax request. In this pagination data load on two phase first when page load and next one is when page scroll down. 

 

make table :- scroll

and export this :


CREATE TABLE IF NOT EXISTS `scroll` (
  `scroll_id` int(30) NOT NULL AUTO_INCREMENT,
  `scroll_title` varchar(150) NOT NULL,
  `scroll_desc` text NOT NULL,
  `scroll_status` enum('0','1') NOT NULL COMMENT '0-active,1-inactive',
  PRIMARY KEY (`scroll_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=23 ;

 

 


INSERT INTO `scroll` (`scroll_id`, `scroll_title`, `scroll_desc`, `scroll_status`) VALUES
(1, 'load mor', 'ajax pagination with loadmore', '1'),
(2, 'load mor', 'ajax pagination with loadmore', '1'),
(3, 'load mor', 'ajax pagination with loadmore', '1'),
(4, 'load mor', 'ajax pagination with loadmore', '1'),
(5, 'load mor', 'ajax pagination with loadmore', '1'),
(6, 'load mor', 'ajax pagination with loadmore', '1'),
(7, 'load mor', 'ajax pagination with loadmore', '1'),
(8, 'load mor', 'ajax pagination with loadmore', '1'),
(9, 'load mor', 'ajax pagination with loadmore', '1'),
(10, 'load mor', 'ajax pagination with loadmore', '1'),
(11, 'load mor', 'ajax pagination with loadmore', '1'),
(12, 'load mor', 'ajax pagination with loadmore', '1'),
(13, 'load mor', 'ajax pagination with loadmore', '1'),
(14, 'load mor', 'ajax pagination with loadmore', '1'),
(15, 'load mor', 'ajax pagination with loadmore', '1'),
(16, 'load mor', 'ajax pagination with loadmore', '1'),
(17, 'load mor', 'ajax pagination with loadmore', '1'),
(18, 'load mor', 'ajax pagination with loadmore', '1'),
(19, 'load mor', 'ajax pagination with loadmore', '1'),
(20, 'load mor', 'ajax pagination with loadmore', '1'),
(21, 'load mor', 'ajax pagination with loadmore', '1'),
(22, 'load mor', 'ajax pagination with loadmore', '1');

 

create :- index.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Scroll pagination Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <style>
  .loader{ height: 100px; overflow: visible; background: #333 url('loading.gif') no-repeat center center; display:none;}
  </style>
</head>
<body>

<script>
var page =0;
//this is for when response come from  first one ajax request then call other one ajax request function
var cnfload = true;

$(function(){
    $(window).scroll(function(){
         if($(window).scrollTop() + $(window).height() >= $(document).height() && cnfload == true ){
            cnfload = false;
            page++;
            load_data(page);
         }

     });
});

function load_data(page){
    $('.loader').show();
    $.ajax({
        type:"post",
        url:"ajax.php",
        data:{page:page},
        success:function(result){
            $('.scroll_pagination').append(result);
            $('.loader').hide();
            cnfload = true;
        }        
    });
    
}
load_data(page);
</script>

<div class="container">
  <h2>Scroll pagination Example</h2>
           
  <table class="table">
    <thead>
      <tr>
      <th>S No.</th>
      <th>title</th>
    <th>description</th>
      </tr>
    </thead>
    <tbody class="scroll_pagination" >

    </tbody>
  </table>

  <div class="loader" ></div>
</div>

 


</body>
</html>

creat :- ajax.php

<?php
//connction of my sql server
$conn = @mysql_connect("localhost","root","");
//selecting data base
mysql_select_db("phpcooker_script",$conn);
$page = $_REQUEST['page'];
$limit = 5;
$offset = $limit * $page;

$query  = "select * from scroll limit $offset,$limit";
$rs = mysql_query($query) or die("failed ".mysql_error());
while($data = mysql_fetch_array($rs))
{
    ?>
      <tr style="height:200px;" >
      <td><?php echo $data["scroll_id"]; ?></td>
      <td><?php echo $data["scroll_title"]; ?></td>
    <td><?php echo $data["scroll_desc"]; ?></td>
      </tr>
      <?php     
}
    

?>

 

 

Download Here

Total Coments (0)