Twitter Bootstrap Compatible Pagination Links in CakePHP

I use Twitter Bootstrap in every CakePHP application I build. If you do the same you probably know the scaffolding generated pagination links are a little skewed. Here is an Element that I created that will properly render CakePHP Pagination links using Twitter Bootstrap’s pagination styling.

<?php if ( !isset( $summary )  ) { $summary = 'before'; } ?>

    <div class="pull-right <?php echo ( !empty($class) ? $class : '');?>">
        <?php if ( $summary == 'before' ) {?>
            <div class="pagination-summary before" style="text-align:right">
                <?php
                echo $this->Paginator->counter(array(
                'format' => __('{:current} of {:count} ' . ucfirst( $this->request->params['controller'] ) . ' &nbsp;/&nbsp; Page {:page} of {:pages}')
                ));
                ?>
            </div>         
        <?php } ?>

        <ul class="pagination">
            <li><?php echo $this->Paginator->first('&laquo;', array('escape'=>false), null, array('escape'=>false, 'class' => 'prev disabled')); ?></li>
            <li><?php echo $this->Paginator->prev('&lsaquo;', array('escape'=>false), null, array('escape'=>false, 'class' => 'prev disabled')); ?></li>
            <?php echo $this->Paginator->numbers(array( 'separator' => '</li><li>', 'before'=>'<li>', 'after'=>'</li>')); ?>
            <li><?php echo $this->Paginator->next('&rsaquo;', array('escape'=>false), null, array('escape'=>false,'class' => 'next disabled')); ?></li>
            <li><?php echo $this->Paginator->last('&raquo;', array('escape'=>false), null, array('escape'=>false,'class' => 'next disabled')); ?></li>
        </ul>
        <?php if ( $summary == 'after' ) {?>
            <div class="pagination-summary after" style="text-align:right">
                <?php
                echo $this->Paginator->counter(array(
                'format' => __('{:current} of {:count} ' . ucfirst( $this->request->params['controller'] ) . ' &nbsp;/&nbsp; Page {:page} of {:pages}')
                ));
                ?>
            </div>         
        <?php } ?>
    </div><!-- /.pagination -->

To use this element create a file in app/View/Elements/ named pagination.ctp and paste the above code snippet.

Next, in your index.ctp view replace the existing Paginator code with the following element call.

<?php echo $this->element('pagination'); ?>

The post Twitter Bootstrap Compatible Pagination Links in CakePHP appeared first on jcutrer.com.