Social Networks

I received lot of request to me how to implement pagination with jquery php ajax and mysql. For my readers I developed simple pagination tutorials which used JQuery min, PHP,  Ajax and MySQL as database. I took Ravi Tamada (9lessons)tutorials help also to modified old script and added extra features like First, Previous, Next and Last buttons. You will must like check the live demo.

pagination-jquery-php-mysql

Working Live Demo and compete script link has been provided at the end of article. You can ask your question in comment section.

Pagination with jquery php ajax and MySQL

: Implementation steps, Script Download and live Demo.
Create below table and have few entries in that so that you will have few pages in the page.

 

CREATE TABLE messages
(
msg_id INT PRIMARY KEY AUTO_INCREMENT,
message VARCHAR(150)
);

JavaScript code: For first time page load default results after onward on request respective page appear with refresh the page.

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
        <script type="text/javascript">
            $(document).ready(function(){
                function loading_show(){
                    $('#loading').html("").fadeIn('fast');
                }
                function loading_hide(){
                    $('#loading').fadeOut('fast');
                }                
                function loadData(page){
                    loading_show();                    
                    $.ajax
                    ({
                        type: "POST",
                        url: "load_data.php",
                        data: "page="+page,
                        success: function(msg)
                        {
                            $("#container").ajaxComplete(function(event, request, settings)
                            {
                                loading_hide();
                                $("#container").html(msg);
                            });
                        }
                    });
                }
                loadData(1);  // For first time page load default results
                $('#container .pagination li.active').live('click',function(){
                    var page = $(this).attr('p');
                    loadData(page);
 
                });           
                $('#go_btn').live('click',function(){
                    var page = parseInt($('.goto').val());
                    var no_of_pages = parseInt($('.total').attr('a'));
                    if(page != 0 && page < = no_of_pages){
                        loadData(page);
                    }else{
                        alert('Enter a PAGE between 1 and '+no_of_pages);
                        $('.goto').val("").focus();
                        return false;
                    }
 
                });
            });
        </script>
 
</script>

You can use this pagination in POO, PDO and MVC all kind of architecture. I hope you will enjoy this tutorial. For complete source code download the Pagination with jQuery, PHP and MySQL script.

Download Source     Demo

Ajax pagination using PHP jQuery and mySQL simple ajax based pagination system with overlay loader. This tutorial help you to create Ajax Based Pagination for your PHP website. Ajax Pagination on Your will load only the specific part rather than all pages items. So it will speed up your website and SEO friendly also.

Post you comments for the further improvements.

  1. Hi,
    I need to display page number in the url and want to stay on the same page and scroll position even after page reload. Can you please help how to incorporate in your pagination. Thanks.

  2. try it~~
    Apply to jQuery 1.11.1
    ————————————————————
    $(‘#container’).on(‘click’,’.active’,function(){
    var page = $(this).attr(‘p’);
    loadData(page);
    });

    $(‘#container’).on(‘click’,’#go_btn’,function(){
    var page = parseInt($(‘.goto’).val());
    var no_of_pages = parseInt($(‘.total’).attr(‘a’));
    if(page != 0 && page <= no_of_pages){
    loadData(page);
    }else{
    alert('??? 1 ? '+no_of_pages+' ???');
    $('.goto').val("").focus();
    return false;
    }
    });
    ————————————————————

    Hello, everyone.
    I'm from Taiwan.

    • $(document).ready(function(){
      function loadData(page){
      //loading_show();
      $.ajax
      ({
      type: “POST”,
      url: “./ajax/ajax_page/load_data.php”,
      data: “page=”+page,
      success: function(msg)
      {
      //loading_hide();
      $(“#container”).html(msg);
      }
      });
      }

      loadData(1); // For first time page load default results

      $(‘#container’).on(‘click’,’.active’,function(){
      var page = $(this).attr(‘p’);
      loadData(page);
      });

      $(‘#container’).on(‘click’,’#go_btn’,function(){
      var page = parseInt($(‘.goto’).val());
      var no_of_pages = parseInt($(‘.total’).attr(‘a’));
      if(page != 0 && page <= no_of_pages){
      loadData(page);
      }else{
      alert('??? 1 ? '+no_of_pages+' ???');
      $('.goto').val("").focus();
      return false;
      }
      });
      });

  3. Script does not work with new versions of jQuery (after jquery-1.9…). If someone found a solution, please post the code here.

  4. Same problem as Hai, please help!

    “Hello, I have a problem with jQuery Library. In your code, you used jQuery 1.4.2 and It’s work. When I use jQuery 1.11.2 then It’s not work. I try to replace data: “page=”+page, to data { page: page },. But it still not working. Hope you can help me with that.”

  5. Hello, I have a problem with jQuery Library. In your code, you used jQuery 1.4.2 and It’s work. When I use jQuery 1.11.2 then It’s not work. I try to replace data: “page=”+page, to data { page: page },. But it still not working. Hope you can help me with that.

  6. asbestos cancers says:

    POINT BLANK THEIR HAS TO BE SOME KIND OF DISCLIPINE IN
    ORDER TO LIVE A HEALTHY LIFESTYLE AND MAINTAIN A GOOD APPEARANCE.
    Uncooked ginkgo biloba seeds have shown some small levels of toxins,
    so if you prefer the seeds it is advised to cook them prior to ingestion.
    if you’re under 120 lbs, unless you’re really short you
    are NOT overweight.

  7. circuit breakers says:

    Thanks for a marvelous posting! I genuinely enjoyed reading it, you are a great author.
    I will ensure that I bookmark your blog and definitely will come back very soon.

    I want to encourage continue your great writing, have a nice weekend!

  8. Bashar Ayyash says:

    Hello,

    Great work man.

    When I do the pagination code onto mysql table has user_id, so each user has a different result set, everything went alright except the number of pages. For example:
    When user has records less than the limit for one page, the number of pages shows me more than one page (the result for full result set) and when I click on the other pages they show me empty page with the bar to go next and previous with the number of pages.

    Please advice,

  9. Thank you. This is a great example with simple code to understanding. Its work very good.
    You can later see of my homepage.( I’m not done yet. 😉 )

  10. very nice….this type of paging i expected thanks again to write tutorial for pagination for my PHP website on my request.

  11. Nice post. You have used Jquery, PHP, Ajax and MySql in very good way. One small question – how can I pass a parameter into the load_data.php script?

Leave a Reply

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

Allowed Tags:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>