Paging With JQuery

[Henry Versemann]

I have a JQuery proxy search page working with two filters on it. Currently it only displays the first page of data, because the target page that it hits is coded to only present one page of data at a time. So how do I add paging capability to the proxy page?

 

[Maria Ahues Bouza]

Henry,

Is the target page the one you're calling using AJAX? If that one is paginated then create a copy that is not paginated?

If you share your code it might make it easier to help you out.

-Maria

On Fri, Aug 17, 2012 at 8:49 AM, Henry Versemann <hvers...@stchas.edu> wrote:

I have a JQuery proxy search page working with two filters on it. Currently it only displays the first page of data, because the target page that it hits is coded to only present one page of data at a time. So how do I add paging capability to the proxy page?

 

--
You received this message because you are subscribed to the Google Groups "dotCMS User Group" group.
To post to this group, send email to dot...@googlegroups.com.
To unsubscribe from this group, send email to dotcms+un...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/dotcms?hl=en.

--
Community Manager

dotCMS
Main: 305.900.2001
Fax: 305.397.2579
www.dotcms.com
http://www.twitter.com/dotCMS
http://www.facebook.com/dotCMS
http://www.twitter.com/mabouza

Please consider the planet before printing this email.

[Henry Versemann]

The target page is paginated, but does not use AJAX. What I was hoping to do is pull in the paging links from the original page modify them and build a JQuery click function for them which will again target the original page.  Are you speaking of sharing my search proxy page code?

[Maria Ahues Bouza]

But you don't want the information paginated on the page that's using AJAX right?

Sorry if I'm not understanding it right.

If you send a link to the page you're working on might be helpful to get a visual of what you're trying to achieve.

Also a pastebin of your code to help you out.

[Henry Versemann]

I want to add paging links to my new proxy search page which does use AJAX/JQuery. What I’d like to do if possible is to capture the original paging links from the original target page modify them somehow to point back to the original target page (now when I get them back from the target page my proxy page is shown as the uri instead of the original target page) and then create a click or some other function to process the newly changed paging links as another asynchronous JQuery request. Can I do this?

[Maria Ahues Bouza]

Ok so I think I understand what you want to do.

So what you would need are buttons / links to go Next and Previous on your results on the new proxy search page.

These buttons / links would call another function that would receive the page number something like this

function(dept,subdept,pageNumber)

And then would send it to your target page

/faculty_staff/faculty/faculty-office-hours.html?currentPage=2

[Henry Versemann]

Correct on all counts.

[Henry Versemann]

But I think I also need to somehow extract the current paging information (total pages, current page, etc.) from the original target page first. Can you show me how to do that or point me to a good paging example that I can look at?

[Maria Ahues Bouza]

You do...

So why don't you do this?

1. Create a new page 

/faculty_staff/faculty/faculty-office-hours-ajax.html

2. The new page will have the results and the links to paginate nothing else.

3. The links to paginate should call your function

function(dept,subdept,pageNumber)

[Henry Versemann]

Pardon my ignorance of JQuery. Its new to me, but I haven’t yet found a good example of how to do this, at least one that I’ve recognized as an example of how to do it. So far I’ve learned a lot about selectors and how to load content from the target page, but I haven’t found a way yet that works for either putting the paging links text or html into a string where I can analyze it and then use that information captured to build my new proxy page’s paging links. So far I’ve tried using different combinations of methods (load, html, attr, text, etc. ) and selectors to pull in the needed links into a local variable, but haven’t succeeded yet. I have been able to pull in the original target pages paging links on my page for display, but that’s as close as I’ve gotten so far. Thanks for the help.

[Alex]

Henry,

Just for curiosity,  are you using the infinite scroll plugin for JQuery?  If so, do you mind sharing how you are implementing it?

Alex

[Henry Versemann]

Alex,

 

Thanks for responding. I’m not using any plugins at this point because I’m still trying to learn all of the AJAX/JQUery basics, so I’m trying to write and understand everything that’s happening as a result of the code that I’m writing, by putting it all on a test page.

I have two filter-based queries working (one for department and one for subdept) with JQuery-assigned functions for change events on both of them, for my test proxy page. The proxy page sends an ajax request to an actual production page on our site, and brings back the query results as well as paging links, from the target page. But I’m new to using AJAX/JQuery and don’t think I understand yet how everything works.  

 

Currently I have one “ready” function coded for doing the queries. I want to add paging links to my test page, but am unsure how to proceed and have not seen any good examples of how to do that. I have copied the latest version of my code here: http://pastebin.com/XnHmi8s0 .

 

Thanks for the help.