Header Ads

Breaking News
recent

Pagination expand like Facebook or twitter

Hello every body!
Today, I will write a topic guide process pagination expand(or more) like Facebook or twitter.
I'm using PHP and Jquery.
First: I will php code and then setup ID of element:
Ex:

<p style="display: block;" id="More_Comments">
        <a class="ov" href="comments_next_page.html?page=2&comment_id=<?php echo $ID;?>">
            <img width="125" height="11" alt="View more" src="/images/link_more.gif">
        </a>
</p>
Here, I setup ID for tag P with name ID: More_Comments.  Then guest click this tag P.
I will call link in tag a href="comments_next_page.html".
In this file comments_next_page.html I will process query and select contents need show.
And file Javascript:

<script type="text/javascript">
        jQuery(function($) {                                    
            var maxLog   = 100;
            var onceLog  = 10; 
            var tryLoad  = Math.ceil(maxLog/onceLog);
            var page = 1;
            var dispLog = 0;
            $('ul.displayBlogComment').each(function(){ dispLog++ });


            $('#More_Comments a').click(function(){                 
                    var url = $(this).attr('href');
                    var now_y = document.documentElement.scrollTop || document.body.scrollTop;
                    $.ajax({
                            url: url,
                            method: "get",
                            dataType: "text",
                            success: function(data, dataType) {      


                                    $('ul.displayBlogComment').append(data);
                                    window.scroll(0, now_y);
                                   
                                    if (tryLoad < page) {                                                                                        
                                            //$('#More').attr('id', 'MoreEnd').html('Not more contents');
                                    } else {                                            
                                            var tmp = 0;
                                            $('ul.displayBlogComment li').each(function(){ tmp++ });
                                            if ((tmp - dispLog) < onceLog) {


                                                    $('#More_Comments').attr('id', 'MoreEnd').html('<span>No more information is available</span>');
                                            }
                                            dispLog = tmp;
                                    }
                            }                                                                


                    });


                    var Split1 = url.split("?");
                    if( Split1.length > 1 ){
                            var Split2 = Split1[1].split("&");
                            var i;
                            var Max = Split2.length;
                            for( i = 0; i< Max; i++ ){
                                    var Split3 = Split2[i].split("=");
                                    if( Split3[0] == 'page' ){
                                            Split3[1] = + eval(Split3[1])+1;
                                            page = Split3[1];
                                    }
                                    Split2[i] = Split3.join("=")
                            }
                            var param = Split2.join("&")
                            $(this).attr('href', Split1[0] + '?' + param);
                    }
                    return false;
            });


        });
</script>


So, When guest hover mouse to tag p with ID More_Comments number page auto increase and query in Database with variable LIMIT and OFFSET.
Good luck!

1 comment:

  1. To see Buy WOW Gold and RS Gold world and in a granda of stand.And a heaven in a wild flower.Hold infinity in the palm your hand and eternity in an hour.

    ReplyDelete

Powered by Blogger.