Recipes/Modifying Appearance of Page Navigation

Problem

I wanted to change the browse results page navigation from "First Next 22 23 24 25 26 Previous Last" to something like: "<< 1 ...... 22 23 24 25 26 ...... 163 >>"

Solution

In order to change the look for these links I copied the pagination-control.php file from application/views/scripts/common/ to my theme's common directory. Then I made the following changes to this file:

  • The First and Last links, now display the number for the first and last pages of results</li
  • Previous/Next are now <</>>
  • Added ellipses to add some spacing to the links
    <!--If page count is greater than 1 and greater than 5-->
    <?php if ($this->pageCount > 1 && $this->pageCount > 5): ?>
    <ul class="pagination_list">
    <?php if (isset($this->previous)): ?>
    <!-- Previous page link -->
    <li class="pagination_previous">
    <!-- Removed the word Previous and replaced it with << -->
    <a href="<?php echo html_escape($this->url(array('page' => $this->previous), null, $_GET)); ?>"><<</a>
    </li>
 
    <?php endif; ?>   
 
    <!-- if the current page is not one of the first three records -->
    <!-- Prevents duplicate links for first three pages like << 1......1 2 3 4 5 .......50>>. This now looks like << 1 2 3 4 5.......50 >> for first three records.-->
    <?php if ($this->current >3): ?>
    <!-- First page link -->
    <li class="pagination_first">
    <a href="<?php echo html_escape($this->url(array('page' => $this->first), null, $_GET)); ?>"><?php echo ($this->first); ?></a>
    </li>
    <li>......</li>
    <?php endif; ?>
 
 
    <!-- Numbered page links -->
    <?php foreach ($this->pagesInRange as $page): ?>
    <?php if ($page != $this->current): ?>
    <li class="pagination_range"><a href="<?php echo html_escape($this->url(array('page' => $page), null, $_GET)); ?>"><?php echo $page; ?></a></li>
    <?php else: ?>
    <li class="pagination_current"><?php echo $page; ?></li>
    <?php endif; ?>
    <?php endforeach; ?>
 
    <!-- if the current page is not one of the last 3 pages -->
    <!-- Prevents duplicate links for the last three pages like << 1......46 47 48 49 50 .......50>>. This now looks like << 1......46 47 48 49 50 >> for last three pages-->
    <?php if ($this->current < ($this->last)-2): ?>
    <li>......</li>
    <!-- Last page link -->
    <li class="pagination_last">
    <a href="<?php echo html_escape($this->url(array('page' => $this->last), null, $_GET)); ?>"><?php echo ($this->last); ?></a>
    </li>
    <?php endif; ?>
 
    <!-- Removed the word Next and replaced it with >> -->
    <?php if (isset($this->next)): ?>
    <!-- Next page link -->
    <li class="pagination_next">
    <a href="<?php echo html_escape($this->url(array('page' => $this->next), null, $_GET)); ?>">>></a>
    </li>
    <?php endif; ?>
 
</ul>
<?php endif; ?>
<!-- if there are 5 or fewer pages, do not include the elipses, and do not include extra links to first and last pages --->
<?php if ($this->pageCount > 1 && $this->pageCount <= 5): ?>
<ul class="pagination_list">
 
    <?php if (isset($this->previous)): ?>
    <!-- Previous page link -->
    <li class="pagination_previous">
    <a href="<?php echo html_escape($this->url(array('page' => $this->previous), null, $_GET)); ?>"><<</a>
    </li>
    <?php endif; ?>
 
    <!-- Numbered page links -->
    <?php foreach ($this->pagesInRange as $page): ?>
    <?php if ($page != $this->current): ?>
    <li class="pagination_range"><a href="<?php echo html_escape($this->url(array('page' => $page), null, $_GET)); ?>"><?php echo $page; ?></a></li>
    <?php else: ?>
    <li class="pagination_current"><?php echo $page; ?></li>
    <?php endif; ?>
    <?php endforeach; ?>
 
    <?php if (isset($this->next)): ?>
    <!-- Next page link -->
    <li class="pagination_next">
    <a href="<?php echo html_escape($this->url(array('page' => $this->next), null, $_GET)); ?>">>></a>
    </li>
    <?php endif; ?>
 
    </ul>
<?php endif; ?>