January 12, 2024 5:03 am

How to Integrate jQuery Scroll Paging with PHP

I have received many request from my readers that how to load page on scroll down like now days many websites doing specially Facebook and Twitter so i have decided to write this helpful article. It uses jQuery and php to load page on scroll down, we have 2 pages one for first time load and second page can be loaded on scroll.

jquery-scroll-paging

[wpdm_file id=25]DEMO

jQuery Code:

<script type="text/javascript">
$(function() {
  var offset = 2;
  $(document).scrollPaging({
  url : 'content.php', //required
  totalRecordCount : 20,//required
  offset :offset, //required
  data :'key=value',//you can pass extra params here
  beforeSend : function(){
  var loader = $('<div id="scrollLoader">loading please wait ....</div>')

  $('#wrapper').append(loader);
  },
  success : function(result) { //required
  $('#scrollLoader').remove();

  $('#wrapper').append(result);
  }
});
});
</script>

Offset: used to get numbers of records you want to fetch on each scroll down.

TotalRecordsCount: used for the limit of records shown on scroll down.

Data: can be used on your needs or it should be blank.

BeforeSend: your code needs to be executed before each request.

Download source of this tutorial and have implemented on you websites.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

8 responses to “How to Integrate jQuery Scroll Paging with PHP”

  1. grails says:

    where did you update the offset on every load of new set, and then submit back to server?

    • Huzoor Bux says:

      We are updating offset in file on this code
      if(settings.data == null || settings.data == ”){
      data = ‘offset=’+settings.offset
      }else{
      data = settings.data+’&offset=’+settings.offset
      }

      • Max John says:

        I have noticed that the offset increases from two to two which means for example 2, 4, 6 at each scroll. Is there a way to make it increase from 1 to two ?
        Also how do we pass the last id displayed on the page to the content.php page ?

  2. Karcsi Hal says:

    great and nice job. the best side for lerning this technologies.

    bravo
    karcsi

  3. Vishnu Priya says:

    nice article,thanks for letting to know how to integrate jQuery scroll paging with php.To find more php projects Click here to know more about php projects.

  4. Chanthan says:

    how can I download it?

  5. Rahul Roy says:

    thank you for this tutorial.. can you tell us how can i use it with PHP. when fetching data from sql..
    (I am actually fetching data from SQL database using PHP and repeatingly printing a div with contents using a while loop)

  6. Max John says:

    Huzoor Bux, Huzoor Bux, Huzoor Bux. You my friend are the BEST !!! You know that ?!!!!! Yeaaaaah ! Thank you sir !!!!

Leave a Reply

Your email address will not be published. Required fields are marked *