The following code shows how to handle pagination action.
<!--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="#">«</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="#">»</a></li>
</ul>
</body>
</html>