this should work with friendlyUrls on:
download that package:
http://www.aplusdesign.com.au/misc/pagination/easyajaxpagination_mootools.zip
upload that files to your modx-installation in /assets/components/ajaxgetpage/js
All files direct in that folder. No files on a subfolder!
create snippet ajaxGetPage:
<?php
if ($ajax=='1'){
$loadPage = $_REQUEST['page'];
$current = $_REQUEST['current'];
$page=$modx->runSnippet('getPage',$scriptProperties);
$pagination='<ul>'.$modx->getPlaceholder('page.nav').'</ul>';
$direction = 'left';
if ($current < $loadPage) {
$direction = 'right';
}
$paginatedStyle = 'style="left:'.($direction == 'left' ? '-750px' : '750px').';"';
// The paginated content HTML slide
$page = '<div class="paginated" id="" '.$paginatedStyle.'>'.$page.'</div>';
return json_encode(array( 'pagination' => $pagination, 'page' => $page, 'current' => $loadPage ));
}
$modx->regClientCss($modx->getOption('assets_url').'components/ajaxgetpage/js/pagination.css');
$modx->regClientStartupScript($modx->getOption('assets_url').'components/ajaxgetpage/js/mootools-1.2.3-com.js');
$modx->regClientStartupScript($modx->getOption('assets_url').'components/ajaxgetpage/js/pagination.js');
$url=$modx->makeUrl($ajaxpage);
$js="
<script>
window.addEvent('domready', function() {
// URL, {Options}
new Paginator('{$url}',{qString : '?page='});
});
</script>
";
$modx->regClientStartupHTMLBlock($js);
return'';
create a new resource in your resource-tree with blank template.
This page is your ajax-processor, which is called from your front-page and sends back the pagination and content to your front-page later.
As content put a snippet-call with something like that:
[[!ajaxGetPage?
&ajax=`1`
&sortBy=`id`
&elementClass=`modSnippet`
&element=`getResources`
&limit=`4`
&pageVarKey=`page`
&tpl=`adresse`
&parents=`11`
&includeTVs=`1`
&processTVs=`1`
]]
on your page where you want to have the pagination put the following into the content.
Don’t forget to fill &ajaxpage with your id of the new created ajax-resource.
This loads the javascripts and CSS to your head.
The javascript loads then the first page from your ajax-page.
The nice thing: You can call that page with yourURL#page=10 and it loads the page 10.
Also browser-back-button and that should work with that code.
[[!ajaxGetPage? &ajaxpage=`251`]]
<!-- Begin Pagination code -->
<div id="pagination_controls">
<div id="pagination_control_wrapper">
</div>
</div>
<div id="pagination_container">
<div id="pagination_content_wrapper">
</div>
</div>
<!-- End Pagination code -->
if you want your page works also with js-off just insert your normal getPage-call and pagination-placeholder in above divs.
