A little help on pagination?

[delonnkoh]

Hi Gurus!


I am trying to understand how to make pagination works.

For example if i have 50 thumbnails to show and i want to show 10 of it per page, there is a right and left button for user to click thru the page, how shld i code it?

Any pointers or explanation are appreciated !

[poltuda]

The code bellow will show the value in the text field instance name "count" & "pageShow".
"btnNext" & "btnPrev" are the instance names of Next, Previous buttons.

AS2 Code:

var limit:Number = 10;
var maxItem:Number = 1000;
var countTrack:Number = 0;

if (countTrack<maxItem) {
    for (var i = 0; i<limit; i++) {
        countTrack++;
        if (pageShow.text == "") {
            pageShow.text = countTrack;
        } else {
            pageShow.text = pageShow.text+","+countTrack;
        }
        count.text = (countTrack+" / "+maxItem);
    }
}
btnNext.onRelease = function() {
    if (countTrack<maxItem) {
        if (pageShow.text != "") {
            pageShow.text = "";
        }
        for (var i = 0; i<limit; i++) {
            countTrack++;
            if (pageShow.text == "") {
                pageShow.text = countTrack;
            } else {
                pageShow.text = pageShow.text+","+countTrack;
            }
            count.text = (countTrack+" / "+maxItem);
        }
    }
};
btnPrev.onRelease = function() {
    if (countTrack>limit) {
        countTrack=(Number(countTrack))-(Number(limit)*2);    
        if (pageShow.text != "") {
            pageShow.text = "";
        }
        for (var i = 0; i<limit; i++) {
            countTrack++;
            if (pageShow.text == "") {
                pageShow.text = countTrack;
            } else {
                pageShow.text = pageShow.text+","+countTrack;
            }
            count.text = (countTrack+" / "+maxItem);
        }
    }
};

How you want the thumbnails to be display and from where those things comes from and in which format?

Poltuda

[delonnkoh]

Hi Poltuda,


Thanks for the code. I intend to display them in 2 columns with 5 on each then next page with item 11 would restart on the top left, i am loading these image info from xml.

example:
first page second page
[01] [02] [03] [04] [05] | [11] [12] [13] [14] [15]
[06] [07] [08] [09] [10] | [16] [17] [18] [19] [20]

< >

Meanwhile i will try to understand the AS2 code u provided and experiment with it in AS3!


Any other pointers/explanation are very much appreciated !!

[flosculus]

i fear you are asking us to do it for you :P which means you will never learn for yourself.

imagine in your head, a grid without the use of a table. put all of the images in an array, scripted to be entered in the correct order you want to use.

then add them to the stage by looping through the array using incremental and decremental limiter variables to determine when the images move to the next line and stop, then reset the whole process when clicking prev or next.

you could even use a multi-di array and put the images for each page into their own array and then have a parent array of pages, so the images can be changed in batch.

flos

[delonnkoh]

i fear you are asking us to do it for you :P which means you will never learn for yourself.

imagine in your head, a grid without the use of a table. put all of the images in an array, scripted to be entered in the correct order you want to use.

then add them to the stage by looping through the array using incremental and decremental limiter variables to determine when the images move to the next line and stop, then reset the whole process when clicking prev or next.

you could even use a multi-di array and put the images for each page into their own array and then have a parent array of pages, so the images can be changed in batch.

flos

haha flos , no i dont expect to be spoonfed...just need some advice or direction, i have been trying and learning it ...got the images to show but got stuck on how to make the counter reset and set to the first row beside the 5th and 10th images...oh welll i took another approach anyway =p

thanks for the explanation thou, i will experiment it more!!