For smart Primates & ROBOTS (oh and ALIENS ).

Blogroll

Tuesday, May 26, 2015

Scrolling paging in PHP

Problem:

Database paging without paging page number.  This is same as Facebook and Tumblr like paging.

Solution:

By using Ajax you can achieve that like scroll paging.

Example:

Use below code. Assuming 1 to 10th records already showing.

index.php
<script type="text/javascript" src="jquery-1.6.js"></script>
<div id="mydiv">
<p>Database paging </p><p>without paging</p><p>page number</p><p>This is same as Facebook</p><p>and Tumblr.</p><p>like paging.</p><p>Assuming 1 to 10th records already showing.</p> <p>Next 11th to end of records will show when scroll page.</p>

<p>1 record</p><p>2 record</p><p>3 record</p><p>4 record</p><p>5 record</p><p>6 record</p><p>7 record</p><p>8 record</p><p>9 record</p><p>10 record</p>   </div>

<a id="loading_img" style="position:fixed; z-index: 99;bottom: 15px; right: 10px; display:none;">Loading... <img src="ajax-loader.gif" /></a>

<script type="text/javascript">
var page = 1;
$(window).scroll(function () {
currentX = $(window).scrollTop();
if  ($(window).scrollTop() == $(document).height() - $(window).height()){
$('a#loading_img').show('fast');
$.get('mydb.php?page=' + page, function(data) {
$('#mydiv').append(data);
$('a#loading_img').hide('fast');
}
);
page++;
}
});
</script>



mydb.php

<?php
$mysqli = new mysqli('localhost', 'root', '','mydb');
$pg=$_GET['page'];
$pg=$pg*10;
$sql='SELECT *FROM book_wise_test ORDER BY book_wise_test_id LIMIT '.$pg .', 10';
$result  = $mysqli->query($sql);
while($row = $result->fetch_assoc()) {
$book_wise_test_id=$row['book_wise_test_id'];
$book_nm=$row['book_nm'];
echo $book_wise_test_id.'======'.$book_nm.'<br/><br/>';
}
?>
Share:

1 comment:

  1. well good
    but better if you also provide DB file as SQL with this one too

    ReplyDelete

Multiple attribute passing in querySelectorAll

Multiple attribute passing in querySelectorAll     Here I am demonstrating code to how to pass multiple attributes in querySelectorAll. <...

Ads Inside Post

Powered by Blogger.

Arsip