Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to use Bootstrap pagination with CakePHP pagination helper

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 2.08k
    Comment on it

    Hello, if you are using pagination with cakephp framework and want to change the view of pagination just like twitter bootsrap then you can do this by doing follow changes in you view and css.
    We can do it by writing some custom classes in view and you must be using cake PaginatorHelper. All you need to do is to write the custom css, or you can copy it from bootstrap css.

    First in your view page you need to write following code for implementing the pagination

     <div class="pagination">
            <ul>
                <?php 
                    echo $this->Paginator->prev( '<<', array( 'class' => '', 'tag' => 'li' ), null, array( 'class' => 'disabled myclass', 'tag' => 'li' ) );
                    echo $this->Paginator->numbers( array( 'tag' => 'li', 'separator' => '', 'currentClass' => 'disabled myclass' ) );
                    echo $this->Paginator->next( '>>', array( 'class' => '', 'tag' => 'li' ), null, array( 'class' => 'disabled myclass', 'tag' => 'li' ) );
                ?>
            </ul>
        </div>
    

    And the css for bootsrap is

    .pagination ul > li.myclass {
        float: left;
        padding: 4px 12px;
        line-height: 20px;
        text-decoration: none;
        background-color: #ffffff;
        border: 1px solid #dddddd;
        border-left-width: 0;
        color: #999999;
        cursor: default;
        background-color: transparent;
    }
    
    .pagination ul > li.myclass:first-child {
        border-left-width: 1px;
        -webkit-border-bottom-left-radius: 4px;
        border-bottom-left-radius: 4px;
        -webkit-border-top-left-radius: 4px;
        border-top-left-radius: 4px;
        -moz-border-radius-bottomleft: 4px;
        -moz-border-radius-topleft: 4px;
    }
    
    .pagination ul > li.myclass:last-child {
        -webkit-border-top-right-radius: 4px;
        border-top-right-radius: 4px;
        -webkit-border-bottom-right-radius: 4px;
        border-bottom-right-radius: 4px;
        -moz-border-radius-topright: 4px;
        -moz-border-radius-bottomright: 4px;
    }
    

    And your pagination will be more beautify and will look like this

    alt text

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: