pagemanager/Resources/Private/Partials/Paging.html

<div class="row d-flex justify-content-center">
  <div class="col-sm-4">
    <span>Anzahl der Einträge: {totalrecords}</span>
    <span>Current Page Number: {paginator.currentPageNumber}</span>
  </div>
  <div class="col-sm-8">
  <ul class="pagination">
    <f:if condition="{paging.previousPageNumber} && {paging.previousPageNumber} >= {paging.firstPageNumber}">
      <f:then>
        <li class="waves-effect list-group">
          <a href="{f:uri.action(action:actionName, arguments:{currentPage: 1})}"
            title="{f:translate(key:'paging.first')}">
            <i class="material-icons">first_page</i>
          </a>
        </li>
        <li class="waves-effect list-group">
          <a href="{f:uri.action(action:actionName, arguments:{currentPage: paging.previousPageNumber})}">
            <i class="material-icons">chevron_left</i>
          </a>
        </li>
      </f:then>
      <f:else>
        <li class="disabled">
          <a href="#"><i class="material-icons">first_page</i></a>
        </li>
        <li class="disabled">
          <a href="#"><i class="material-icons">chevron_left</i></a>
        </li>
      </f:else>
    </f:if>

    <li><span class="pageNumbers">Seite {paginator.currentPageNumber} von {paging.lastPageNumber} |</span></li>
    <f:for each="{pages}" as="page">
      <li class="{f:if(condition: '{pages} == {paginator.currentPageNumber}', then:'active', else: 'waves-effect')}">
        <a class="hide" href="{f:uri.action(action:actionName, arguments:{currentPage: page})}">{page}</a>
      </li>
    </f:for>

    <f:if condition="{paging.nextPageNumber} && {paging.nextPageNumber} <= {paging.lastPageNumber}">
      <f:then>
        <li class="waves-effect list-group">
          <a href="{f:uri.action(action:actionName, arguments:{currentPage: paging.nextPageNumber})}">
            <i class="material-icons">chevron_right</i>
          </a>
        </li>
        <li class="waves-effect list-group">
          <a href="{f:uri.action(action:actionName, arguments:{currentPage: paging.lastPageNumber})}">
            <i class="material-icons">last_page</i>
          </a>
        </li>
      </f:then>
      <f:else>
        <li class="disabled">
          <a href="#"><i class="material-icons">chevron_right</i></a>
        </li>
        <li class="disabled">
          <a href="#"><i class="material-icons">last_page</i></a>
        </li>
      </f:else>
    </f:if>
  </ul>
</div>
</div>