Zend Paginator Example

18 Apr 2012

One of the reasons why zend framework has been so popular is due to all the hard work put in to make
sure components are extremely configurable. Sure there are default behaviours, but nothing is assumed
and anything that needs to be overwritten or reconfigured can be. A strong emphasis on configuration
over convention means you'll never be lumbered with code that just can't be changed.

Zend Paginator is one of the smaller components of Zend Framework that allows you to get a simple
paginator up and running on your listings or search pages in a matter of minutes. There are some
great examples in the documentation and they even throw some pagination control views at you to get
you going.

http://framework.zend.com/manual/en/zend.paginator.usage.html

They demonstrate a search style paginator that allows you jump back 'n forth through your pages.

As well as a list item style paginator, detailing what set you were viewing and controls to jump +/-
one page, or straight to the start / end.

They also have a dropdown style paginator that uses javascript to jump to your desired page.
These are great, but didn't quite do what I wanted. My specification was as follows;

  1. Must be able to jump to the first results page at any time by clicking the first page number (1)
  2. Must be able to jump to the last results page at any time by clicking the last page number
  3. Must be able to jump forward one page
  4. Must be able to jump back one page
  5. Must show the current page the user is on
  6. Must show surrounding pages from the page the user is currently on

And the example design was;

So off I went and created the required view. I quite like that it always maintains the first and last page number throughout, which in my opinion is much cleaner than having a "First" / "Last" text link. Anyway, I thought I'd share it with y'all in case you ever comeĀ into a similar requirement.

Enjoy!

<?php if ($this->pageCount) :
 $midRange = floor(sizeof($this->pagesInRange) / 2);
 if (($this->current + $midRange) < $this->pageCount) :
 array_pop($this->pagesInRange);
 $display_end = true;
 endif; ?>
<div class="paginationControl<?= $this->position; ?>">
 <div class="paginationControl_showing">
 Viewing page <strong class="current"><?= $this->current; ?></strong> of <strong class="last"><?= $this->last; ?></strong>
 </div>
 <div class="paginationControl_pages">
 <!-- Previous page link -->
 <?php if (isset($this->previous)): ?>
 <a href="<?php echo $this->url(array('page' => $this->previous)) . $this->query; ?>" class="previous">&lt; Previous</a> |
 <?php else: ?>
 <span class="disabled">&lt; Previous</span> |
 <?php endif; ?>
 <?php if (($this->current - $midRange) > $this->first): ?>
 <?php array_shift($this->pagesInRange);?>
 <a href="<?php echo $this->url(array('page' => $this->first)) . $this->query; ?>" ><?php echo $this->first ?></a>... |
 <?php endif; ?>
 <!-- Numbered page links -->
 <?php foreach ($this->pagesInRange as $page): ?>

 <?php if ($page != $this->current): ?>
 <a href="<?php echo $this->url(array('page' => $page)) . $this->query; ?>" ><?= $page; ?></a> |
 <?php else: ?>
 <strong><?= $page; ?></strong> |
 <?php endif; ?>
 <?php endforeach; ?>
 <?php if (!empty($display_end)) : ?>
 ...<a href="<?php echo $this->url(array('page' => $this->last)) . $this->query; ?>" ><?php echo $this->last ?></a> |
 <?php endif; ?>
 <!-- Next page link -->
 <?php if (isset($this->next)): ?>
 <a href="<?php echo $this->url(array('page' => $this->next)) . $this->query; ?>" class="next">Next &gt;</a>
 <?php else: ?>
 <span class="disabled">Next &gt;</span>
 <?php endif; ?>
 </div>
</div>
<?php endif; ?>

And some CSS to accompany it;

.paginationControl {
    padding: 10px;
    font-family: arial;
    font-size: 12px;
    color: #333333;
    height: 13px;
}
.paginationControl_showing {
    float: left;
    position: relative;
    font-weight: bold;
}
.paginationControl_showing strong.current {
    color: #a8050d;
}
.paginationControl_pages {
    float: right;
    position: relative;
    font-weight: bold;
    color: #494848;
}

.paginationControl_pages a {
    color: #494848;
}

.paginationControl_pages strong {
    color: #a8050d;
}

.paginationControl_pages .previous, .paginationControl_pages .next {
color: #a8050d;
}
comments powered by Disqus