[solved] Bootstrap 4 Pagination

[Marcel Epp]

Hi,

i am trying out Bootstrap 4. I want to build a site for my wife. Thanks to the forum i get the blog part done.
But the pagination is not working as aspected. The first number of the pagination did not get styled.
Only for the first and the last link there is a span and no class is asigned.

echo $images_posts->renderPager(array(
'nextItemLabel' => "Vorwärts",
'previousItemLabel' => "Zurück",
'listMarkup' => "<nav aria-label='Page navigation'><ul class='MarkupPagerNav pagination'>{out}</ul></nav>",
'itemMarkup' => "<li class='{class} page-item'>{out}</li>",
'linkMarkup' => "<a class='page-link' href='{url}'>{out}</a>"
));

result is:

The markup from the first picture is not the same like the other.

How can i change the markup for the first link, and the last link of course when i changed the site?

[Jonathan Lahijani]

Add this to the array:

'currentLinkMarkup' => "<a class='page-link' href='{url}'>{out}</a>", 

 

[Marcel Epp]

Hi Jonathan,

thank you for your answer. That solved the problem! The code looks now like this:

echo $images_posts->renderPager(array(
'nextItemLabel' => "Vorwärts",
'previousItemLabel' => "Zurück",
'listMarkup' => "<nav aria-label='Page navigation'><ul class='MarkupPagerNav pagination'>{out}</ul></nav>",
'itemMarkup' => "<li class='{class} page-item'>{out}</li>",
'linkMarkup' => "<a class='page-link' href='{url}'>{out}</a>",
'currentLinkMarkup' => "<a class='page-link' href='{url}'>{out}</a>"
));

 

[SamC]

Just another way in case someone finds this thread and needs an alternative HTML output. There's also a 'currentItemClass' setting which I had to use when I had this exact same problem, those spans being in there were an issue. With an active class on the list item or the anchor tag they are unnecessary. I tried to find a way to just remove them but ended up doing this instead. Also using BS4, except I did it like this (using BS4 variables + extending a custom border class):

<div class="pager-nav pb-5">
<?php
  echo $entries->renderPager(array(
    'nextItemLabel' => "Next",
    'previousItemLabel' => "Prev",
    'listMarkup' => "<ul>{out}</ul>",
    'itemMarkup' => "<li class='{class}'>{out}</li>",
    'linkMarkup' => "<a href='{url}'>{out}</a>",
    'currentItemClass' => "active"
  )); 
?>
</div>

and the styles:

.default-border {
  border: $border-width solid;
  border-color: $card-border-color; 
  border-radius: 10px; 
}

/* Pager */
.pager-nav {
  display: flex;
  justify-content: center;

  ul {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
    @extend .default-border;

    li {
      flex: 1 1 auto;
      
      &.MarkupPagerNavFirst a {
        border-radius: $border-radius 0 0 $border-radius;
      }

      &.MarkupPagerNavLast a {
        border-radius: 0 $border-radius $border-radius 0;
      }

      a {
        font-weight: bold;
        font-size: $font-size-base * 0.9;
        color: $gray;
        background-color: $white;
        display: block;
        padding: 0.5rem 1rem;
      }

      &.active a {
        background: $main-color;
        color: $white;
      }
    }
  }
}

...outputs:

...html output:

<div class="pager-nav pb-5">
  <ul>

    <li class='active MarkupPagerNavFirst MarkupPagerNavFirstNum'>
      <a href='/processwire-tutorials/'>
        <span>1</span>
      </a>
    </li>

    <li class='MarkupPagerNavLastNum'>
      <a href='/processwire-tutorials/page2/'>2</a>
    </li>

    <li class='MarkupPagerNavNext MarkupPagerNavLast'>
      <a href='/processwire-tutorials/page2/'>Next</a>
    </li>
    
  </ul>
</div>

It's a different approach so I think it's worth sharing.

[Marcel Epp]

Yeah! awesome the active part makes it even better.

'currentItemClass' => "active"