New Plugin: AJAX Pagination
Development and Programming
Greetings,
This is my very first plugin, so please if there are any faults in the code or anyone has any suggestions for improvement or features then please let me hear them 😊.
Basically this plugin makes it easy to implement a non-refresh pagination for your weblog entries. You can tell it how many entries it should list per page.
Updates V 1.3 - Fixed a potential bug for people not removing index.php from their URLs.
V 1.2 - Updated code to make it actually work, doh! ><
V 1.1 - Added several checks to make sure the syntax is used properly. - Added two more optional parameters called “prev_class” and “next_class”. These are used to define the CSS class of each link. - Made “prev_link” and “next_link” conditionals as well so you can check to see if they are set. Check example below to see how I’ve used them. - Made “limit” parameter optional and if left blank, it will default to 4 entries per page. - Updated usage section.
V 1.0 - Initial Concept
Usage :: Setup :: 1) Create your main template where your entries will be shown. This is where you Holder <div> needs to be located and inside that Holder <div> you need to embed the AJAX template. Also jQuery 1.2.6 needs to be included in the header tags. An example will be shown below. 2) Create your AJAX template for the ajaxification (real word?) to take place. Make sure in your {exp:weblog:entries} tag you include limit=”{limit}”, offset=”{offset}” and dynamic=”off”. Again, example will be shown below.
:: Parameters :: These parameters must not be blank: weblog - Define which weblog you are pulling entries from. template - The full url to your Ajax Template holder - Define what <div> on your main template is going to hold the entries. parse - This needs to be set to “inward” for the plugin to work.
These parameters are optional: limit - Define how many entries should be shown per page. Default is 4 if left blank. next - Define exactly how you want the “Next” text to look. Default is “Next >>” if left blank. prev - Define exactly how you want the “Prev” text to look. Default is “<< Prev” if left blank. next_class - Define the CSS class you want to use for the Next link. Default is class=”” if left blank. prev_class - Define the CSS class you want to use for the Prev link. Default is class=”” if left blank.
:: Variables :: The plugin will not work if any of these variables are missing in your template. {prev_link} - This gets replaced by the Previous Link. Can also be used as conditional. Example below. {next_link} - This gets replaced by the Next Link. Can also be used as conditional. Example below. {limit} - This tells the {exp:weblog:entries} tag how many to show each page as told by the “limit=” parameter above. {offset} - This tells the {exp:weblog:entries} tag how many entries to offset.
:: Barebones Example Usage :: Main Template: <pre><code><html> <head> < script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js” >< /script > </head> <body> <div id=”wrapper”> <div id=”body”> <h1>This is an example for AJAX Pagination</h1> <div id=”ajax_content”>{embed="template_group/ajax_template"}</div> </div> </div> </body> </html></code></pre> AJAX Template:
{exp:ajax_pagination weblog="weblog" limit="4" template="{site_url}template_group/ajax_template" holder="ajax_content" parse="inward"}
{prev_link} {if prev_link && next_link}|{/if} {next_link}
{exp:weblog:entries weblog="weblog" disable="pagination|member_data|trackbacks" limit="{limit}" offset="{offset}" dynamic="off"}
<h3>{title}</h3>
{body}
{/exp:weblog:entries}
{/exp:ajax_pagination}
This looks good - Definitely could have a use for it on a future project.
Thanks Sean 😊.
I updated the plugin. Update notes are in OP.
Hi Cody,
Thanks for cooking this up. Does it change the url when you page through the pagination this generates?
I gave it a test run today and it’s duplicating h2 on the page and not progressing to the next page. Here’s my setup:
<html>
<head>
[removed][removed]
</head>
<body>
<div id="ajax_content">
{embed="incs/ajax_template"}
</div>
</body>
</html>
{exp:ajax_pagination weblog="weblog" limit="1" template="ajax_template" holder="ajax_content" parse="inward"}
{prev_link} {if prev_link && next_link}|{/if} {next_link}
{exp:weblog:entries weblog="weblog" disable="pagination|member_data|trackbacks" limit="{limit}" offset="{offset}" dynamic="off"}
<h3>{title}</h3>
{/exp:weblog:entries}
{/exp:ajax_pagination}As you can see I stripped all those original divs out of there trying to get to the bottom of why it’s not working, but I couldn’t figure it out.
here’s a link to a test page showing what’s happening: http://andyandyandy.com/index/gallery/test/
Andy,
It’s nothing you’ve done. I actually made this while working with the built in EE Calendar and it’s tailored to work with that. I never did test it with weblog entries ><. I’m now looking at the code going, “Oh my god, what was I thinking ahaha.” So I need to update this plugin so it actually works for weblog entries, very sorry 😕.
To answer your question though, no, it does not change the URL. It’s only meant for a small bit of your website, not main content. I wouldn’t recommend using it for main content (when I’ve reworked the plugin) as google won’t like it too much 😊.
Again, sorry about that!
No problem Cody, thanks for getting back with me so quick! It was simple enough to test out so no worries. I’ll be trying your ajax comments tomorrow, thanks for sharing!
Alright, I have fixed the problem. To make this work, make sure in your Ajax Template in the paramater “template” you enter int your Template Group and Template to your Ajax Template 😊. So if your Ajax Template was called “ajax_stuff” and it’s under the Template Group “includes” then the “template” parameter would be:
template="includes/ajax_stuff"Have fun! 😊
Updated the plugin again to fix a potential bug for people not removing index.php from their URL’s. The change is to put the full URL to your Ajax Template in the “template” parameter. I’m guessing 99% of the time it could look like this:
template="{site_url}template_group/ajax_template"Hi Cody, These udpates still mean it only works with the calendar still right? Andy
Nope, it works for weblogs now 😊.
Hi Just tried out your plugin and it works really well! However is it possible to make it work with orderby and sort also? Now the order doesn’t work when using the prev and next.
Hi again, There is also a problem when I change the limit. It’s the right limit when I first enter the page but when I use the next/prev links it changes to only show 4.
Ignore my last post, just found the problem 😊
Wow, this is excellent! Thank you!!
Any chance of adding number support? (i.e. “Page 1 of 4” and “1 2 3 4” as links)?