Cakephp Paginator Custom Styling

Question

I am using the Paginator Component and Helper.

My Code block for Styling is as follows.

    <!-- Pagination -->
    <div class="pagination">
        <ul class="pages">
            <li class="prev"><a href="#">&lt;</a></li>
            <li><a href="#" class="active">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li class="next"><a href="#">&gt;</a></li>
        </ul>
    </div>

When i try to create the pagination using the following

<!-- Pagination -->
<div class="pagination">
    <ul class="pages">
        <?php if($this->Paginator->hasPrev()) echo $this->Paginator->prev('&lt;', array('tag' => 'li', 'escape' => false)); ?>
        <?php echo $this->Paginator->numbers(array('separator' => false, 'tag' => 'li', 'currentClass' => 'active')); ?>
        <?php if($this->Paginator->hasNext()) echo $this->Paginator->next('&gt;', array('tag' => 'li', 'escape' => false)); ?>
    </ul>
</div>

The Active class is given to the li tag but my template uses the active class to the a-href tag

is there any way i can make cake give it to the a tag?

Answer 1

You will have to extend and override the PaginatorHelper::number() method for that.

Then use your customized paginator helper app wide by using the aliasing feature to make it available as $this->Paginator in your views to replace it in all views.

public $helpers = array(
    'Paginator' => array(
        'className' => 'MyPaginator',
    )
);

Instead of overwriting the whole method you could do this as well:

public function numbers($options = array()) {
    $numbers = parent::numbers($options);
    /* see explanation below */
    return $numbers;
}

Explanation: Use DOM or regex to find, modify and replace the <li class="active"><a></a></li> active <li> element with your modification. This might be the better way because if the core behavior changes you just need to adept your replacement logic instead of having to figure out what has changed in the code and update your method. This bootstrap paginator helper does it this way.