Marcel Epp

[solved] Bootstrap 4 Pagination

Recommended Posts

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:

5a26f8432b417_Bildschirmfoto2017-12-05um20_47_56.png.b070934ec7856d5d9354c44913182373.png

5a26f844848ec_Bildschirmfoto2017-12-05um20_48_08.png.06667fbab70d3d47e21771ecbfae5ee8.png

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

5a26f84593708_Bildschirmfoto2017-12-05um20_48_53.png.ab2af33fc957f42a11fe32bd1d772a0b.png

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

Share this post


Link to post
Share on other sites

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>"
));

 

  • Like 1

Share this post


Link to post
Share on other sites

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:
pager.jpg

...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.

  • Like 6

Share this post


Link to post
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


  • Recently Browsing   0 members

    No registered users viewing this page.