pagemanager/Resources/Private/Partials/Backend/Pagination.html

<f:if condition="{totalpages > 1}">
  <div class="row d-flex justify-content-center">
    <div class="col-sm-4">
      <span>Anzahl der Einträge: {totalrecords}</span> 
    </div>
    <div class="col-sm-8 justify-content-center">
      <ul class="pagination">
        <f:if condition="{previousPage} && {previousPage} >= {firstPage}">
          <f:then>
            <li class="wave-effect list">
              <a href="{f:uri.action(action:actionName, arguments:'{currentPage: firstPage}')}">
                <i class="material-icons">first_page</i>
              </a>
            </li>
            <li class="wave-effect list">
              <a href="{f:uri.action(action:actionName, arguments:'{currentPage: previousPage}')}">
                <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 {paging.currentPage} von {totalPages}</span></li>
        <f:for each="{activePages}" as="activePage">
          <li class="{f:if(condition: '{activePage} == {currentPage}', then:'active', else:'waves-effect')}">
            <a href="{f:uri.action(action:actionName, arguments:{currentPage: activePage})}">{page}</a>
          </li>
        </f:for>
        <f:if condition="{nextPage} && {nextPage} <= {lastPage}">
          <f:then>
            <li class="waves-effect list">
              <a href="{f:uri.action(action:actionName, arguments:{currentPage: nextPage})}">
                <i class="material-icons">chevron_right</i>
              </a>
            </li>
            <li class="waves-effect list">
              <a href="{f:uri.action(action:actionName, arguments:{currentPage: lastPage})}">
                <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>
</f:if>