Jump to content

Reorder pagination


taotoo
 Share

Recommended Posts

Is it possible to change the pagination order, from:

< 123456 >

to:

< 561234 >

The exact number which the pagination would start on would need to be the current pagination page (pageNum, I believe).

It's actually the 'next page' arrow at the end that I need to modify, but it's easier to show what I'm getting at with the page numbers.

Longer version:

I have product pages which show a single product. Beneath the single product, I want to show a grid of other products.

I want to show all products that follow the current product first, then maybe have a horizontal line and show all the products previous to the current one. This is so that the visitor doesn't have to scroll past a bunch of products that they've probably already scrolled past shortly before, while still allowing them to see all the products if they want to. 

The grid will use infinite scroll, which does it's thing based on the link on the 'next page' pagination item.

edit: the products are manually sorted in the backend.

Link to comment
Share on other sites

1 hour ago, taotoo said:

561234

To take the last element of a WireArray and put it at the beginning, you can do this:

$products->prepend($products->pop());

To get only pages after the current product, you can do this:

$products = $pages->find("sort>{$page->sort}")

Maybe post some of your code?

Link to comment
Share on other sites

2 hours ago, Jan Romero said:

To take the last element of a WireArray and put it at the beginning, you can do this:


$products->prepend($products->pop());

To get only pages after the current product, you can do this:


$products = $pages->find("sort>{$page->sort}")

Maybe post some of your code?

Thank you. I'd like to apply your first line of code to the pagination links, but not sure how.

Here are (hopefully) the relevant parts of the code:

<?php $posts = $pages->find("parent.template=adopt, limit=4, sort=sort"); ?>



<?php $pagination = $posts->renderPager(array(
	'nextLinkMarkup' => "<a class='page-link next' href='{url}#more-dogs'><span>{out}</span></a>"
	));?>
	
	

<div class="row infinite-container" data-infinite-scroll='{ "path": ".next"}'>

	<?php foreach ($posts as $post): ?>

		<div class="col-lg-3 infinite-post">
			
			[ ]
			
		</div>
			
	<?php endforeach; ?>
		
		
		
<?php echo $pagination; ?>

 

Link to comment
Share on other sites

On 4/14/2020 at 3:16 PM, taotoo said:

< 123456 >

to:

< 561234 >

This is what it should look like on page 4, I assume? I’m not sure this will be possible with a single call to renderPager(). MAYBE you’ll be better off just rolling the pagination markup yourself.

For example you could do this:

$totalPages = ceil($posts->getTotal() / $posts->getLimit());

for ($i = $input->pageNum+1; $i <= $totalPages; $i++)
{
    echo "<li><a href='{$page->url}{$input->urlSegmentString}/page{$i}'>{$i}</a></li>";
}
for ($i = 1; $i <= $input->pageNum; $i++)
{
    echo "<li><a href='{$page->url}{$input->urlSegmentString}/page{$i}'>{$i}</a></li>";
}

Mostly you’ll need to look out for the href attribute, i.e. my code throws away any GET variables and uses the default pagination prefix “page”. Also you don’t get any of the niceties ProcessWire gives you by default. If you rely on those, maybe use renderPager() and rearrange the generated Markup. Both options are pretty hackish. You’ll have to choose which one is the least pain in the butt for your system…

  • Like 1
Link to comment
Share on other sites

8 hours ago, Jan Romero said:

This is what it should look like on page 4, I assume?

 I think ideally the current pagination page would appear first, so while on page 4 it would look like < 456123 >, with "4" being non-clickable.

8 hours ago, Jan Romero said:

 


$totalPages = ceil($posts->getTotal() / $posts->getLimit());

for ($i = $input->pageNum+1; $i <= $totalPages; $i++)
{
    echo "<li><a href='{$page->url}{$input->urlSegmentString}/page{$i}'>{$i}</a></li>";
}
for ($i = 1; $i <= $input->pageNum; $i++)
{
    echo "<li><a href='{$page->url}{$input->urlSegmentString}/page{$i}'>{$i}</a></li>";
}

Mostly you’ll need to look out for the href attribute, i.e. my code throws away any GET variables and uses the default pagination prefix “page”. Also you don’t get any of the niceties ProcessWire gives you by default. If you rely on those, maybe use renderPager() and rearrange the generated Markup. Both options are pretty hackish. You’ll have to choose which one is the least pain in the butt for your system…

This code looks great, thank you!

The infinite scroll that I'm using gets the next page from the ">" link rather than from the page number links themselves. How would I create a next page link that reflects the new order? I'm looking at your code but I don't have any experience of for loops, and limited experience of the ++ thing!

Edit: I added this line before the first for loop to add in the current page:

echo "<li>{$input->pageNum}</li>";

And added "- 1" into the below to end it one page earlier:

for ($i = 1; $i
<=
$input->pageNum - 1; $i++)

But I'm struggling to create the next page link that infinite scroll needs.

Edited by taotoo
Link to comment
Share on other sites

Unfortunately it appears that reordering the pagination pages won't work as the infinite scroll script only ever reads the initial link, and assumes that all further page numbers will increase sequentially.

So I'm trying to slice the actual pages instead:

<!--Get all dogs-->
<?php $data = $pages->find("parent.template=adopt, sort=sort"); ?>

<!--Get current pagination page dogs and all later pagination page(s) dogs-->
<?php $data1 = $data->slice((($input->pageNum * 4) - 4),100); ?>

<!--Get previous pagination page(s) dogs-->
<?php $data2 = $data->slice(0, (($input->pageNum * 4) - 4)); ?>

<!--Merge and set limit for pagination-->
<?php $posts = $pages->find("id=$data1|$data2, limit=4"); ?>

This seems to work, however while the two groups come in the order that I want, the manual order of individual items isn't respected (it's using date created or similar instead), e.g:

23 21 24 22    4 1 3 2

If I add "sort=sort" to the last line, the manual order of individual items is respected, but the two groups unfortunately also respect that order, e.g.

1 2 3 4   21 22 23 24

What I actually want is:

21 22 23 24   1 2 3 4

Link to comment
Share on other sites

  • 2 weeks later...

In the end I went back to trying to reorder the pagination pages, and I only needed to add Jan's code like this:

<?php $totalPages = ceil($posts->getTotal() / $posts->getLimit()); ?>

	<script>
		var nextPages = [<?php
				for ($i = $input->pageNum+1; $i <= $totalPages; $i++)
				{
					echo "'page{$i}',";
				}
				for ($i = 1; $i <= $input->pageNum -1; $i++)
				{
					echo "'page{$i}',";}?>];

	</script>

And then set infinite scroll's options like this:

	<script>
		$('.infinite-container').infiniteScroll({
			path: function() {
				if (this.loadCount < <?php echo $totalPages; ?>) {
					return nextPages[this.loadCount];
				}
			}
		});
	</script>

So thank you Jan!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...