|
For pagination:
Once you have the camcount it is easy to do pagination.
The total number of pages is the total cams divided by the number of cams per page.
I am using the number of cams that I am putting on each page as my limit parameter and I have it stored in a var called limit.
So, the number of pages is camcount/limit. However, that might not end up being an integer so to use that as the number of pages I use the ceiling function to round up to the nearest whole number.
maxpages=Math.ceil(camcount/limit);
So I now know how many total pages I have and I can make a pagination widget of some kind so the user can bounce through the pages or go to the page of their choosing.
If I know what page we are on then I can use the offset parameter on the api_url to pull the cams for that page.
We simply multiply the limit times the page number and we have the offset needed to grab that page of cams and we can then tack the offset parameter on to the url:
var offset=limit * pagenum;
api_url += '&offset=' + offset;
Getting the page number we are on is the harder task here.
Javascript does not have a built in function to read the url query string so if we want to use the url to get the next page we have some coding to do in javascript or we can grab the query on the server side in php.
I decided to use a different method. I am using an ajax call to grab the next page of data and then just loading it into the cams div.
In my pagination widget I set the page number variable to the page selected and then have a call to a function called change_page(). That function loads the page and then moves the browser view back to the top of the page. I could have just used load_page() but I wanted the animation effect of moving the page to the top. I might get rid of that because it is a little distracting to me.
In the edit/var section:
var pagenum=0;
In the pagination widget:
onClick="pagenum++;change_page(); (advance the page number by 1 and then change the page to that page number)
function change_page()
{
load_page();
document.getElementById("countdiv").scrollIntoView ({behavior: 'smooth'});
}
Hope that helps someone.
.
|