Jump to content

Cusom pagination html code


MilenKo
 Share

Recommended Posts

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.

custom-pagination-issue.jpg

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 {  }

 

  • Like 1
Link to comment
Share on other sites

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 ? 

Link to comment
Share on other sites

  • 4 years later...
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?

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.
  • Similar Content

    • By Shohan Arafat
      I was looking for code sample where I can attach a textarea for setting up a content in my page. And I wanted to do it programatically. But I can't find a way to do that. Is it possible to add a content textarea with program?
    • By Joachim
      Long time user and huge fan of PW, but this time I can't find an answer to my question this time:
      For my social media buttons, I have a Repeater field called var_link_web with two fields: one is for the URL, and the other is an Images field containing two images that are used as a background-image for a <div>, of which the second is the ':hover' version (although activated through JavaScript here). 
      There are four instances of this Repeater, of which two are 'turned off'.
      I use the following PHP in my _main.php to call them, wrapped in <p><?php == ?></p>:
      $s_m_button = $variables->var_link_web; foreach($s_m_button as $button){ $button_image = $button->var_link_image->first->height(80); $button_image2 = $button->var_link_image->eq(1)->height(80); echo " <a href='$button->var_link_url'> <div class='image_link' style='background-image:url({$button_image->url})' onMouseOver='this.style.backgroundImage=url({$button_image2->url})' onMouseOut='this.style.backgroundImage=url({$button_image->url})'> </div> </a>"; }; ($variables leads to an unpublished page with several fields I want to have easy access to, and is defined in _init.php.)
      However, this gives me the following result:

      I have no idea where the extra <p>'s come from. The URL field has the 'HTML Entity Encoder' turned on. What's even weirder is that the HTML source file seemingly renders correctly:
      <p> <a href='https://www.facebook.com/'> <div class='image_link' style='background-image:url(/site/assets/files/1045/icons-facebook-square.0x80.png)' onMouseOver='this.style.backgroundImage="url(/site/assets/files/1045/icons-facebook-square2.0x80.png)"' onMouseOut='this.style.backgroundImage="url(/site/assets/files/1045/icons-facebook-square.0x80.png)"'> </div> </a> <a href='https://www.instagram.com/'> <div class='image_link' style='background-image:url(/site/assets/files/1046/icons-instagram-square.0x80.png)' onMouseOver='this.style.backgroundImage="url(/site/assets/files/1046/icons-instagram-square2.0x80.png)"' onMouseOut='this.style.backgroundImage="url(/site/assets/files/1046/icons-instagram-square.0x80.png)"'> </div> </a> </p> Removing the JavaScript has no effect. I'm probably missing something obvious, but am at a loss here.
       
      Thank you in advance!
    • By Robin S
      This module lets you add some custom menu items to the main admin menu, and you can set the dropdown links dynamically in a hook if needed.
      Sidenote: the module config uses some repeatable/sortable rows for the child link settings, similar to the ProFields Table interface. The data gets saved as JSON in a hidden textarea field. Might be interesting to other module developers?
      Custom Admin Menus
      Adds up to three custom menu items with optional dropdowns to the main admin menu.
      The menu items can link to admin pages, front-end pages, or pages on external websites.
      The links can be set to open in a new browser tab, and child links in the dropdown can be given an icon.
      Requires ProcessWire v3.0.178 or newer.
      Screenshots
      Example of menu items

      Module config for the menus

      Link list shown when parent menu item is not given a URL

      Advanced
      Setting child menu items dynamically
      If needed you can set the child menu items dynamically using a hook.
      Example:
      $wire->addHookAfter('CustomAdminMenus::getMenuChildren', function(HookEvent $event) { // The menu number is the first argument $menu_number = $event->arguments(0); if($menu_number === 1) { $colours = $event->wire()->pages->findRaw('template=colour', ['title', 'url', 'page_icon']); $children = []; foreach($colours as $colour) { // Each child item should be an array with the following keys $children[] = [ 'icon' => $colour['page_icon'], 'label' => $colour['title'], 'url' => $colour['url'], 'newtab' => false, ]; } $event->return = $children; } }); Create multiple levels of flyout menus
      It's also possible to create multiple levels of flyout submenus using a hook.

      For each level a submenu can be defined in a "children" item. Example:
      $wire->addHookAfter('CustomAdminMenus::getMenuChildren', function(HookEvent $event) { // The menu number is the first argument $menu_number = $event->arguments(0); if($menu_number === 1) { $children = [ [ 'icon' => 'adjust', 'label' => 'One', 'url' => '/one/', 'newtab' => false, ], [ 'icon' => 'anchor', 'label' => 'Two', 'url' => '/two/', 'newtab' => false, 'children' => [ [ 'icon' => 'child', 'label' => 'Red', 'url' => '/red/', 'newtab' => false, ], [ 'icon' => 'bullhorn', 'label' => 'Green', 'url' => '/green/', 'newtab' => false, 'children' => [ [ 'icon' => 'wifi', 'label' => 'Small', 'url' => '/small/', 'newtab' => true, ], [ 'icon' => 'codepen', 'label' => 'Medium', 'url' => '/medium/', 'newtab' => false, ], [ 'icon' => 'cogs', 'label' => 'Large', 'url' => '/large/', 'newtab' => false, ], ] ], [ 'icon' => 'futbol-o', 'label' => 'Blue', 'url' => '/blue/', 'newtab' => true, ], ] ], [ 'icon' => 'hand-o-left', 'label' => 'Three', 'url' => '/three/', 'newtab' => false, ], ]; $event->return = $children; } }); Showing/hiding menus according to user role
      You can determine which menu items can be seen by a role by checking the user's role in the hook.
      For example, if a user has or lacks a role you could include different child menu items in the hook return value. Or if you want to conditionally hide a custom menu altogether you can set the return value to false. Example:
      $wire->addHookAfter('CustomAdminMenus::getMenuChildren', function(HookEvent $event) { // The menu number is the first argument $menu_number = $event->arguments(0); $user = $event->wire()->user; // For custom menu number 1... if($menu_number === 1) { // ...if user does not have some particular role... if(!$user->hasRole('foo')) { // ...do not show the menu $event->return = false; } } });  
      https://github.com/Toutouwai/CustomAdminMenus
      https://processwire.com/modules/custom-admin-menus/
    • By franciccio-ITALIANO
      Hi, I have created over twenty different templates for the same site.
      In all of them, the same long piece of html code appears. 
      Could someone suggest me the php code I need to write in the template files to link that piece of html code, which is always the same everywhere?
      What strategies could I use to link it?
      The problem is that this long piece of code that is identical everywhere, MAY change IN TIME. So, when I fix it, I would have to change it in all twenty template files.... 
       
    • By fruid
      $limit = 12; $start = $limit * ($input->pageNum() - 1); $allcasts = pages("template=cast"); $casts = $allcasts->find("has_parent=$page, sort=$sort"); $casts = sortOutEmpty($casts, $decider); $casts->setTotal($casts->count()); $casts->setStart($start); $casts->setLimit($limit); // just to test echo $casts->getStart(); // 0 or 12 or 24 or 30 respectively echo $casts->getLimit(); // 12 echo $casts->getTotal(); // 31 or whatever the total echo casts($casts); // never mind this, it's just for markup creation and works fine $pager->render($casts, $pagerOptions); // I store the name of a specific field as a string in a variable so I can dynamically sort out content of which that field is empty in the current language  function sortOutEmpty($items, $decider) {     $casts = new PaginatedArray;     foreach ($items as $item) :         if ($item->$decider != '') :             $casts->add($item);         endif;     endforeach;     return $casts; } I get the right number of pages in the pager. Pager works but the results never paginate.
      This pagination API is driving me nuts, it just doesn't work!
      I can't be the only one who's having issues with this, it's hard to find any topic where issues are discussed and the API-documentation is, as usual, very laconic.
      Thanks for help!
×
×
  • Create New...