Cusom pagination html code

[MilenKo]

Hello. I am working on a culinary web project where I am aiming at listing all recipes with a pagination after reaching the recipe limit. As far as I already did the pagination on another project, I was quite happy to use the code and see it in action. However, my joy was not lasting long as far as the present pagination HTML code differs from the other and I was scratching my head today for several hours and yet no solution to precisely match the styling.

I was able to apply the pagination, show the prev/next and numbers properly, however the active class is not applied properly and the design has the prev/next arrows at the both ends of the recipe block (image attached).

Here is the pagination original html code:

<!-- Pagination -->
<div class="sixteen columns">

	<div class="pagination-container">
		<nav class="pagination">
			<ul>
				<li><a href="#" class="current-page">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
			</ul>
		</nav>

		<nav class="pagination-next-prev">
			<ul>
				<li><a href="#" class="prev"></a></li>
				<li><a href="#" class="next"></a></li>
			</ul>
		</nav>
	</div>
</div>

And here is my pagination code (after making sure that the template pagination is enabled):

<div class="sixteen columns">
	<div class="pagination-container">


	<?php echo $result->renderPager(array(	

		"nextItemLabel" => __(">>"),
		"previousItemLabel" => __("<<"),				
		"currentItemClass" => "current-page",	
		'listMarkup' => "<nav class='pagination'><ul>{out}</ul></nav>",
		'itemMarkup' => "<li>{out}</li>",
		'linkMarkup' => "<a href='{url}'>{out}</a>"

		));
	?>

		<nav class="pagination-next-prev">
			<ul>
				<li><a href="#" class="prev"></a></li>
				<li><a href="#" class="next"></a></li>
			</ul>
		</nav>
	</div>
</div>

As far as the pagination active class is not applied on the <li> but on the <a href... > I tried to change the linkMarkup to: 'linkMarkup' => "<a href='{url}' class='{class}'>{out}</a>" however that shows that the {class} is not applied with linkMarkup but with itemMarkup. Tried to add the class to itemMarkup too, but the same result is showing.

For sure the navigation is not an issue if it is next to the numbers, however I wanted to attempt to match fully the style and learn how can I move the prev and next pointers away from there or in other words to match the original theme.

So any ideas how to achieve the proper functionality and obtain the previous/next page links? I read so many tutorials and manuals today mentioning to use prev() and next() but in my case the results are not coming from $page and the next page pointed to the next page in my admin but not the next results page.

[MilenKo]

Looking at the code this morning, it would have been so easy if I could apply the class='{class}' to the linkMarkup same as it can be applied to itemMarkup. On top of that I need to find a way to move the prev/next buttons aside from the page numbers. Trying to link $page->next() worked sort of but did not point to the next rendering result page but to point to the next page in the row after the initial Recipes one.

What am I doing wrong and how can this be achieved? Out of all the issues I was prepared to have, the pagination was one of the easiest to deal with earlier before I had a different template to work on

P.S. I just noticed that the present page is wrapped up with <span> so I should be able to assign the curent-page to a span and it should work, but that won't still solve the issue with moving the arrows to the sides. I am looking into a link for Prev/Next page that I could add to the link and the case would be solved.

[Robin S]

The Pager includes prev and next links with identifying classes in the markup when there is a prev and next page to the results. Use CSS to position those links where you want them to be.

.MarkupPagerNavPrevious {  }
.MarkupPagerNavNext {  }

 

[MilenKo]

Thanks Robin S. Will try to style those and see how it goes from there. At least I would have the links to prev/next page separated. Do you have any idea why the {class} is not inserting properly in linkMarkup? It seems strange to me that it works fine with itemMarkup but not with linkMarkup ? 

[Krlos]

On 3/5/2017 at 5:35 PM, MilenKo said:

Thanks Robin S. Will try to style those and see how it goes from there. At least I would have the links to prev/next page separated. Do you have any idea why the {class} is not inserting properly in linkMarkup? It seems strange to me that it works fine with itemMarkup but not with linkMarkup ? 

Hi, I'm having the same issue with bootstrap 4.5, I need to apply "active" class to the <li> element of the active link, but it's not working.

How did you solve it?

[Gideon So]

Hi @Krlos

You can set currentItemClass = 'active'.

https://processwire.com/docs/front-end/markup-pager-nav/

Gideon

[Krlos]

On 5/26/2021 at 3:52 AM, Gideon So said:

Hi @Krlos

You can set currentItemClass = 'active'.

https://processwire.com/docs/front-end/markup-pager-nav/

Gideon

Hi @Gideon So, I tried that but for reason is not working for me.

[Gideon So]

Hi @Krlos

Can you post your code here?

Gideon