AJAX Pagination

Developer

Laisvunas

3rd Party (Commercial)

EE Version Support

  • ExpressionEngine 1.x
  • ExpressionEngine 2

Compatibility

If an item is crossed out, it might be untested, not applicable or incompatible. Contact the developer to be sure.

  • Updater
  • Multi Site Manager
  • Stand Alone Entry Form
  • Low Variables
  • Content Elements
  • Better Workflow
  • Matrix
  • Grid
  • Webservice
  • Publisher

Requirements

  • jQuery for the Control Panel

Add-On Type(s)

Plugin

Tags

Allows you to display content from multiple pages using Ajax. Any ExpressionEngine tag outputting pagination links is supported!

THE TAG {exp:ajax_pagination:wrapper}

This tag is used to wrap all contents of the embed template (see the examples’ code).
It has following parameters:

1) embed_template_url - required. Allows you to specify URL of the embed template.
You must specify full URL, i.e. starting with “http”. This parameter accepts inside its value
the following ExpressionEngine variables: site_id, site_url, site_index, homepage.

2) ajax_container - required. Allows you to specify HTML id parameter of the HTML element
which will act as the container to place data loaded by AJAX.

3) process_indicator - optional. Allows you to specify HTML class parameter of the HTML element
which will act as the indicator of the page being loaded by AJAX.

4) process_indicator_scroll - optional. Allows you to specify if HTML element
which acts as the indicator of the page being loaded by AJAX should be scrolled into view (value “yes”) or not (value “no”).
Default is “no”.

5) ajax_pagination_vars - optional. Should be used when there is a need to output embed variables inside embed template.
Inside main template you should specify embed variable “ajax_pagination_vars” which contains pipe-delimited list of variables,
e.g. ajax_pagination_vars=“channel|category”. Then in the embed template you should add parameter ajax_pagination_vars=”{embed:ajax_pagination_vars}”.
Thus listed variables then can be used by adding to their names “ajax_pagination_embed_”, e.g. {ajax_pagination_embed_channel}, {ajax_pagination_embed_category}
(see complex example’s code).


6) ajax_pagination_values - optional. Should be used when there is a need to output embed variables inside embed template.
Inside main template you should specify embed variable “ajax_pagination_values” which contains pipe-delimited list of values of embed variables,
e.g. ajax_pagination_values=“technical|279”. Then in the embed template you should add parameter ajax_pagination_values=”{embed:ajax_pagination_values}”.
Thus listed variables then can be used by adding to their names “ajax_pagination_embed_”, e.g. {ajax_pagination_embed_channel}, {ajax_pagination_embed_category}
(see complex example’s code).

7) xid_element_id - required for EE 2.7+ Allows you to specify id attribute of HTML input element containing the value of XID hash.
This element should be included into embed template.

THE TAG {exp:ajax_pagination:links}

This tag is used to wrap all contents inside the variable pair {paginate}{/paginate} (see the examples’ code).
It has following parameter:

1) pagination_symbol - optional. Allows you to specify symbol which precedes pagination number in URL. Default value is “P”.

USAGE

I. Simple example (without using embed variables)

Main template (e.g. technical/ajax_pagination):


<html>

<head>

<title>AJAX Pagination demo</title>

<style type="text/css">

/*Common*/

body {
color: black;
font-family: "arial unicode ms", helvetica, arial, sans-serif;
margin: 0;
font-size: small;
padding: 0;
}

a {
color: #4372aa;
text-decoration: none;
cursor: pointer;
}

a:hover {
text-decoration: underline;
}

/*Main content*/

#maincontent {
width: 48em;
position: relative;
left: 50%;
margin-left: -24em;
padding-bottom: 1em;
}

/* Headings */

h1 {
font-size: 1.5em;
font-weight: normal;
}

h2 {
font-size: 1.1em;
font-weight: bold;
}

/* Indicator */

.process_indicator {
background-image: url({homepage}/images/ajax-loader.gif);
background-repeat: no-repeat;
background-position: bottom left;
height: 3em;
width: 100%;
text-align: left;
display: none;
}

</style>

</head>

<body>

<div id="maincontent">

<h1>AJAX Pagination demo</h1>

{embed="technical/embed_ajax_pagination"}

</div>

</body>

</html>

Embed template (e.g. technical/embed_ajax_pagination):


{exp:ajax_pagination:wrapper 
ajax_container="ajax_container" 
embed_template_url="{homepage}/technical/embed_ajax_pagination" 
xid_element_id="infinite_scroll_xid"
process_indicator="process_indicator" 
process_indicator_scroll="yes" 
parse="inward"
}

{ajax_pagination_container_top}
<div id="ajax_container">
{/ajax_pagination_container_top}

<input type="hidden" id="infinite_scroll_xid" value="{XID_HASH}">

<div class="process_indicator">
Loading…
</div>

{exp:channel:entries channel="technical" category="279" sort="asc" orderby="title" limit="5" paginate="both" dynamic="off" parse="inward"}

<p>{absolute_count}. <a href="{path="technical/demo/{url_title}"}">{title}</a></p>

{paginate}{exp:ajax_pagination:links}{pagination_links}{/exp:ajax_pagination:links}{/paginate}

{/exp:channel:entries}

{ajax_pagination_container_bottom}
</div>
{/ajax_pagination_container_bottom}

{/exp:ajax_pagination:wrapper}

II. Complex example (embed variables used)

Main template (e.g. technical/ajax_pagination):


<html>

<head>

<title>AJAX Pagination demo</title>

<style type="text/css">

/*Common*/

body {
color: black;
font-family: "arial unicode ms", helvetica, arial, sans-serif;
margin: 0;
font-size: small;
padding: 0;
}

a {
color: #4372aa;
text-decoration: none;
cursor: pointer;
}

a:hover {
text-decoration: underline;
}

/*Main content*/

#maincontent {
width: 48em;
position: relative;
left: 50%;
margin-left: -24em;
padding-bottom: 1em;
}

/* Headings */

h1 {
font-size: 1.5em;
font-weight: normal;
}

h2 {
font-size: 1.1em;
font-weight: bold;
}

/* Indicator */

.process_indicator {
background-image: url({homepage}/images/ajax-loader.gif);
background-repeat: no-repeat;
background-position: bottom left;
height: 3em;
width: 100%;
text-align: left;
display: none;
}

</style>

</head>

<body>

<div id="maincontent">

<h1>AJAX Pagination demo</h1>

{embed="technical/embed_ajax_pagination" ajax_pagination_vars="channel|category" ajax_pagination_values="technical|279"}

</div>

</body>

</html>

Embed template (e.g. technical/embed_ajax_pagination):


{exp:ajax_pagination:wrapper 
ajax_container="ajax_container" 
embed_template_url="{homepage}/technical/embed_ajax_pagination" 
xid_element_id="infinite_scroll_xid"
process_indicator="process_indicator" 
process_indicator_scroll="yes" 
ajax_pagination_vars="{embed:ajax_pagination_vars}" 
ajax_pagination_values="{embed:ajax_pagination_values}" parse="inward"}

{ajax_pagination_container_top}
<div id="ajax_container">
{/ajax_pagination_container_top}

<input type="hidden" id="infinite_scroll_xid" value="{XID_HASH}">

<div class="process_indicator">
Loading…
</div>

{exp:channel:entries channel="{ajax_pagination_embed_channel}" category="{ajax_pagination_embed_category}" sort="asc" orderby="title" limit="5" paginate="both" dynamic="off" parse="inward"}

<p>{absolute_count}. <a href="{path="technical/demo/{url_title}"}">{title}</a></p>

{paginate}{exp:ajax_pagination:links}{pagination_links}{/exp:ajax_pagination:links}{/paginate}

{/exp:channel:entries}

{ajax_pagination_container_bottom}
</div>
{/ajax_pagination_container_bottom}

{/exp:ajax_pagination:wrapper}

III. Displaying several paginated lists in one template

Displaying several paginated lists in one template is easy.
You only need to define additional variable “tag_count” for each embed template.

For example:

{embed="technical/embed_ajax_pagination" ajax_pagination_vars="tag_count" ajax_pagination_values="1"}

{embed="technical/embed_ajax_pagination2" ajax_pagination_vars="tag_count" ajax_pagination_values="2"}

{embed="technical/embed_ajax_pagination3" ajax_pagination_vars="tag_count" ajax_pagination_values="3"}

In displaying several paginated lists in one template it is essential
1) to use didderent embed template for each paginated list
2) in each embed template to define different value of “ajax_container” parameter of exp:ajax_pagination:wrapper tag

AJAX Pagination Links

This entry was created October 13, 2011, 10:15 am.
This entry was last updated May 28, 2015, 6:51 am.

Disclaimer: Information about ExpressionEngine add-ons is provided as a service to you, the user, and every member of the ExpressionEngine community. devot:ee is not responsible if you hose, mangle, wreck, or otherwise destroy your EE website by installing an add-on that you found out about at this site, regardless of its rating, Favorites status, commercial or free status, or general popularity. Caveat EEmptor!

Returns: devot:ee has a 30-day return policy on all commercial add-ons sold through devot-ee.com. If you need to return an add-on, do not go to the developer or the developer's site, but rather visit our returns page at https://devot-ee.com/returns to initiate your return. If you have questions, email support@devot-ee.com.

There are no reviews for this add-on yet.

What are you waiting for? Rate it and review it!