Question

I’m trying to figure out a good method for loading records sequentially using some pagination.

Upon load the page will query the db and grab the most recent 5 records and show a link ‘show more’ at the end of these. When this link is clicked it should post again and retrieve the next 5 records, so in this sense the records will be loaded only adhoc.

I guess this is somehow similar to pagination but without the counter of pages, just the ‘next’. The current code we have is inline javascript which jquery posts to a php script and returns an array which then gets appended. Good thing is that html is not

Should my initial query grab the count of all records in the db for pagination?

Any reference in particular that will help me accomplish this?

The code below has one problem, when ‘Showmore’ is clicked it only loads one more record instead of 3 (num var)

var num = 3;
                var i =0,j=0;
                var total;
                var sm;

                function fun(sm){                        

                      $.post('select1.php?id=2',{},function(count){
                        total = count;
                        });

                      $.post('select1.php?id=1',{num:num},function(data)
                        {
                        if(num == total)
                        {
                            $('#show').hide();
                            $('#show1').html('<p>No more images found!</p>');
                        } 

                       var arr = data.split('/');

                    //alert(arr.length);

                    if(sm){j=sm};

                    for(i=j;i<(arr.length-1);i++)
                    {
                    //alert(arr[i]);
                       var p = arr[i].split('.');
                    //alert(p[1]);
                       $('#imggal').append('<a href="page3.php?file='+arr[i]+'"><img src="upload/small'+arr[i]+'" title ='+arr[i+1]+' border="0"></img></a><br><span style="display:block;font-size:12px;color:blue;letter-spacing:-1px">'+arr[i+2]+'<br>'+arr[i+1]+'</span><br></br').fadeIn('slow');
                       i=i+2;
                    }
                    });
                }

                fun();

                $(document).ready(function(){

                    $('#showmore').click(function(e){
                       //e.preventDefault();


                        j=num*3;

                        num++;
                        //alert(num);
                        //$('#imggal').html('');
                        fun(j);

                    });
                });

Answer 1

I can’t post comments yet so I will attempt to answer with limited information here. I am going to make some assumptions.

• You have your select query ordering by something to keep your result sequential between calls
• You don’t want to remove previous items when you load more, you literally want to keep displaying new items until you run out of items in the database to add

With those assumptions, an easy way to determine if you have more items to display is to keep track of an offset along with your number per request. As an example…

If you want to display 5 items per ‘show more’ requests you would

• Start offset at 0
• Start num at 5
• Request num+1, but only display num
• If result set is > num, you can show more, as you know for sure more exist
• If result set is <= num, you can’t show any more, you ran out of data
• If you ‘show more’, increase your offset by num

With this method, you have no idea of your total items in your database, but you always know if you have more to show.

Again, you would need to limit and orderby your select query in the database to make this work. IE for mysql

select filename, thumbnail, id from image_table order by id limit OFFSET, NUM

OFFSET and NUM are from your .post