Bootstrap Tutorial - Handle pagination action








The following code shows how to handle pagination action.

Example

<!--from w  w w .  j  av a 2 s .  c  o m-->
<!--Revised from
http://fiddle.jshell.net/juanmendez/tzngn/
-->
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-git2.js'></script>
<link rel="stylesheet" type="text/css"
  href="http://getbootstrap.com/assets/css/docs.css">
<link rel="stylesheet" type="text/css"
  href="http://getbootstrap.com/dist/css/bootstrap.css">
<script type='text/javascript'
  src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<script type='text/javascript'>//<![CDATA[ 
/*1. apply pagination control if pagination element has data-paginaton-control="true"*/
(function($){
    "use strict";
    function PaginationControl( $pagination, element, option )
    {
        var control = this;
        var arrows = {};
        var tabs = {child:''};
        arrows.setLeft = function(el){
            arrows.$left = $(el);
            arrows.$left.on( 'click', function(){
                var siblings = tabs.getSiblings();
                if( siblings.prev )
                {
                    tabs.setCurrent( siblings.prev, 'arrow_click' );
                    arrows.refresh();
                }
                arrows.$left.trigger( 'leftarrow-click' );
            });
        };
        arrows.setRight = function(el){
            arrows.$right = $(el);
            arrows.$right.on( 'click', function(){
                var sibling = tabs.getSiblings();
                if( sibling.next )
                {
                    tabs.setCurrent( sibling.next, 'arrow_click' );
                    arrows.refresh();
                }
                arrows.$right.trigger( 'rightarrow-click' );
            });
        };
        arrows.prevent = function( $arrow, allow )
        {
            if( allow )
            {
                if( control.option.paginationArrow == 'hide' )
                    $arrow.css( "display", "" );
                else
                if( control.option.paginationArrow == 'inactive' )
                    $arrow.removeClass( "active" );
                else
                if( control.option.paginationArrow == 'disabled' )
                    $arrow.removeClass( "disabled" );
            }
            else
            {
                if( control.option.paginationArrow == 'hide' )
                    $arrow.css( "display", "none" );
                else
                if( control.option.paginationArrow == 'inactive' )
                    $arrow.addClass( "active" );
                else
                if( control.option.paginationArrow == 'disabled' )
                    $arrow.addClass( "disabled" );
            }
        }
        arrows.refresh = function(){
            var sibling = tabs.getSiblings();
            arrows.prevent( arrows.$right, sibling.next?true:false );
            arrows.prevent( arrows.$left, sibling.prev?true:false );
        };
        tabs.setCurrent = function( el, event_type ){
            if( tabs.child )
            {
                $(tabs.child).removeClass("active");
            }
             tabs.child = el;
            var $tab = $(el);
            $tab.addClass("active");
            $tab.trigger( 'pagination-click' );
        }
        tabs.setChildren = function( children ){
            tabs.children = children;
            //see if a child is already active
            var $active = $pagination.find( ".active");
            if( $active.length > 0 )
            {
                tabs.setCurrent( $active[0], 'init_selection' );
            }
            else
            if( control.option.paginationArrow )
            {
                tabs.setCurrent( children[0], 'init_selection' );
            }
            arrows.refresh();
            $( children ).on( 'click', function(e){
                tabs.setCurrent( this, 'mouse_click' );
                if( control.option.paginationArrow )
                   arrows.refresh();
            });
        };
        tabs.getSiblings = function()
        {
            var siblings = {next:0, prev:0};
            if( tabs.child )
            {
                var index = tabs.children.indexOf( tabs.child );
                if( index + 1 < tabs.children.length )
                {
                    siblings.next =  tabs.children[ index + 1 ];
                }
                if( index - 1 >= 0  )
                {
                    siblings.prev =  tabs.children[ index - 1 ];
                }
            }
            return siblings;
        }
        var publix = {};
        publix.reload = function( option ){
            control.option = $.extend( {}, PaginationControl.default, option );
            var children = $pagination.find( "li");
            var len = children.length;
            var innerChildren = [];
            if( control.option.paginationArrow && len > 2 )
            {
                arrows.setLeft( children[0]);
                arrows.setRight( children[len-1] );
                for( var i = 1; i < len-1; i++ )
                {
                    innerChildren.push( children[i] );
                }
            }
            else
            {
                for( var i = 0; i < len; i++ )
                {
                    innerChildren.push( children[i] );
                }
            }
            tabs.setChildren( innerChildren );
        }
        publix.reload( option );
        return publix;
    }
    PaginationControl.default = { paginationArrow:'' };
    $.fn.paginationControl = function( option )
    {
        var $this = $(this);
        $this.data( "pagination-control", new PaginationControl( $this, this, option ) );
    }
    $(window).on( 'load', function(){
        $("ul.pagination").each( function(){
            var $pagination = $(this);
            if( $pagination.data('paginationControl')  )
            {
                $pagination.paginationControl( $pagination.data() );
            }
        } );
    });
})($);
/*handle pagination tab and arrow clicks*/
 $(function(){
        $('.pagination').on( 'rightarrow-click leftarrow-click pagination-click', function(e){
            console.log( e );
        } );
});
//]]>  
</script>
</head>
<body>
  <ul class="pagination" data-pagination-control="true"
    data-pagination-arrow="disabled">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#1">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
    <li><a href="#5">5</a></li>
    <li><a href="#">&raquo;</a></li>
  </ul>
</body>
</html>

Click to view the demo