What is the best way of doing a pagination? I would also need to save the current page, so that when I click a link it would save the page I was on. So if I'm on page 2 of the pagination and click one link and then get back to pagination page it would remember that I was on page 2.
I get the results/data from Json request where I have offset and limit possibility.
$.getJSON(base_url+'/ajax/get_news/4/!OFFSET!/!LIMIT!/true', func...
Where !LIMIT! is how many results it shows and !OFFSET! is, well offset :D When I click a link, it makes that request, it goes throught the results and appends the result into page.
What is best way to save the page, cookies? Should I get all the results and then do the pagination somehow or do new request when user change page?
Some tutorial or "hands on" example would be awesome. Normal instructions/guides are difficult to undestand since my first language isn't english.
It appears you have two questions:
1) How to save page state (what page you are on): If the application must continue to use an ajax, then you should look at storing the state in the url as discribed here:
http://ajaxpatterns.org/Unique_URLs
2) Regarding where to do the pagination, I think it would depend on the size of the data to paginate. If it is small and you are not worried about the data changing on between paging, do it all in javascript. Otherwise, do it server-side.
Okey I should use the !OFFSET! and !LIMIT! to do the pagination. I just need change those numbers with pagination links (1 2 3 4 pages etc) to get the pagination to work I believe. But I dont know where to start :/
Related
Hi i want to make an effect similar to what this site does http://www.hffm.co.uk/
When you change the page the url up top changes but the content in the sidebar and header stays the same. - i am also curious if this affects SEO.
They stay the same - and do not reload with the page - i figure it has to be some ajax thing? Curious what a system like this is called.
The point is in their case they dont want to interrupt the radio on a link change.
To update the specific part of the page it can be achieved through Ajax and JQuery. Basically both of the those works on the client side which means that website doesn't refresh. You can always make a Ajax request to the server which can return the content in a Json format and that content can be reflected on the page using Jquery.
This is only just a overview of how ajax/Jquery works. But you need to be more specific in what you are trying to achieve and what you have done so far.
I need to keep controllers' state in angular ,for improving some user experiences, during user is visiting different pages.
For instance I have a list, which is created via a directive, and it has a pagination section, so imagine when a user go to page 20 and choose an item, they'll be redirected to the detail page, but when they click back button and return to the previous page they see the first page of the list which is not convenient and they expect to be on page 20 again.
I've come up with several options:
Using a dialog to display second page (item detail), so they can close that modal and return to the previous form without any change.
Redirecting users to the second page with a parameter in URL and then return them with that parameter to understand what page number they have been before.
Keeping some crucial variable globally to store controller state and using them when user comes back.
But I think there should be better ideas like keeping controllers' state during redirection.
Any idea would be appreciated.
Redirecting users to the second page with a parameter in URL and then return them with that parameter to understand what page number they have been before.
I prefer this because you get the added benefit of staying on page 20 when you do a page refresh. Options 1 and 3 do not give you this added benefit. Path params are also bookmark friendly.
Another alternative for you to look into that is almost as good is localstorage
or cookies. I dont think these options are better than your 2 though.
I've tried doing some research on the various jquery history plugins, but I can't find any examples for my situation, so I'm starting to think maybe what I'm trying to do is not possible.
We have a very complicated search page that updates with ajax. Users search using a ton of options, and they get back a list of results which they can sort, page etc. Then if they click on one of the results, it navigates them to another page to view the details. However, if they click Back they do not return back to how the page appeared after all the ajax and javascript updates. They see the search page with none of their results.
I was hoping that I could pull of something with adding a hash before they navigated away, or using one of the jquery history plugins to achieve something similar, so that when they clicked Back, it wouldn't RELOAD the search page, but would just show them their cached version (how it last looked when they clicked on one of the results).
From what I've seen, it looks like most of the examples I've found for ajax and back buttons use a hash value that tells the page how to arrange itself, even allowing for bookmarking the page that includes the hash. I think for me that would mean that I'd basically have to serialize everything in the search page into a hash value, which doesn't seem practical unless I am totally misunderstanding how it works.
Does anyone out there know if this possible?
There are at least 2 ways to do what you want:
"Classic" - store all user search options in cookie or in session, like "last search". So, when user navigates to search page during session, you can read cookie / session and show last search results with that options.
"Modern" way - use HTML5 history API - on each search form a search options object and push it in via history.pushState - when user navigate to other page and then presses "back", browser will use this state to perform a search.
If it's that complex, better you develop your own solution without any plugin. Just use location.hash to get and set hash value and store all form input elements and their values after hash like a querystring input1=a&input2=b
On every form submit update hash querystring
If user navigates back in history read hash value parse it and update your form fields and submit to get search results automatically.
you can check out SammyJS this is the plugin I used for ajax history. Hope it helps
in gmail if you check mark email 4 then move to different set of 50 or 25 records and mark selection 26 then both 4 and 26 are retained if you move back and forth.
How does google do this?
would it be possible to do something like this in a page that brings only 50 records and when NEXT is clicked...it again goes to DB to bring next set of 50 records.
You don't technically change pages, it's all the same page, the content is just changed dynamically with JavaScript.
Take a close look at the url. Only the hash part of it changes. Which means you don't really load new pages when you click things on Gmail. They just change the elements shown to you with javascript.
Similar thing could be done with page loads if you use localStorage or sessionStorage
You could do the page you're describing with Ajax techniques.
The inner pages are most likely loaded using AJAX. Kind of like iFrames, you monitor the links that are clicked and only load the inner part of what you're after so that you aren't loading things twice...
It's possible that these are saved in JavaScript or Cookies... I would probably store them as a JavaScript array of selected checkboxes personally... depending on how much load you're already giving to the user.
I am looking for a way to display a list of websites one at a time from a URL list. I'm fine with a very manual solution, I found an AJAX solution where each "page" is displayed in a tab but it is very heavy because if I have 50 pages I want users to page through one at a time, this solution essentially pulls all 50 pages onto the one page. Do you know of a framework which does the same thing but only loads one page at a time? Thank you very much for the advice and help. Here is the site I found - http://css-tricks.com/jquery-ui-tabs-with-nextprevious/
You could load the URLs into an array and then create a 'next' button that loads the next url into a div; replacing the previous one.
do you require doing this will javascript?
might be easier to curl the pages using php, then echo this returned data as an eval-able array into the html. Then allow user to alter which part of the returned array you are looking at using a next and prev button.
if you pre-load each one it will be heavy as you have noted.
This idea is screaming for AJAX. With proper AJAX calls, you would only load a page once it has actually been selected by tab. Any previous page loaded into the area would need to be dumped. You shouldn't actually need to physically switch tabs if you're using the src attribute of an iframe, simply changing the src and forcing it to refresh itself should accomplish the trick. If you are performing a screen scrape through a remote web service, then you could simply use jQuery/AJAX to rewrite the innerHTML of the panel in question.