Skip to content

Commit

Permalink
First step to multi-pagionation
Browse files Browse the repository at this point in the history
  • Loading branch information
Gabriel Birke committed Apr 14, 2010
1 parent eaa41b8 commit a52e192
Show file tree
Hide file tree
Showing 3 changed files with 160 additions and 15 deletions.
4 changes: 1 addition & 3 deletions demo/demo.htm
View file
Expand Up @@ -20,7 +20,7 @@
*
* Gets called every time the user clicks on a pagination link.
*
* @param {int}page_index New Page index
* @param {int} page_index New Page index
* @param {jQuery} jq the container with the pagination links as a jQuery object
*/
function pageselectCallback(page_index, jq){
Expand Down Expand Up @@ -88,8 +88,6 @@

-->
</style>

<title>Pagination</title>
</head>
<body>
<h1>jQuery Pagination Plugin Demo</h1>
Expand Down
144 changes: 144 additions & 0 deletions demo/demo_multi.htm
View file
@@ -0,0 +1,144 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pagination Demo I - Simple pagination</title>
<link rel="stylesheet" href="../lib/jquery_pagination/pagination.css" />
<script type="text/javascript" src="../lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../lib/jquery_pagination/jquery.pagination.js">
</script>
<script type="text/javascript">

// This is a demo that shows
// a) how to have pagination for the same content multiple times
// b) two independent pagination elements

// The elements that will be displayed are in a hidden DIV and are
// cloned for display. The elements are static, there are no Ajax
// calls involved.
// The elements for the second example are not cloned. Instead, the
// elements are hidden and the current element is shown.

/**
* Callback function that displays the content.
*
* Gets called every time the user clicks on a pagination link.
*
* @param {int} page_index New Page index
* @param {jQuery} jq the container with the pagination links as a jQuery object
*/
function pageselectCallback(page_index, jq){
var new_content = $('#hiddenresult div.result:eq('+page_index+')').clone();
$('#Searchresult').empty().append(new_content);
return false;
}

/**
* Initialisation function for pagination
*/
function initPagination() {
// count entries inside the hidden content
var num_entries = $('#hiddenresult div.result').length;
// Create content inside pagination element
$(".searchresult_pagination").pagination(num_entries, {
callback: pageselectCallback,
items_per_page:1 // Show only one item per page
});
}

// When document is ready, initialize pagination
$(document).ready(function(){
initPagination();
});



</script>
<style type="text/css">
<!--
* {
padding: 0;
margin: 0;
}
body {
background-color: #fff;
margin: 20px;
padding: 0;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
}

h1 {
margin-bottom:10px;
font-size:1.5em;
}

#Searchresult {
margin-top:15px;
margin-bottom:15px;
border:solid 1px #eef;
padding:5px;
background:#eef;
width:40%;
}

#Searchresult p { margin-bottom:1.4em;}

#footer {
margin-top:20px;
font-size:60%;
color:#15B;
}

-->
</style>

</head>
<body>
<h1>jQuery Pagination Plugin Demo</h1>
<div class="pagination searchresult_pagination">
</div>
<br style="clear:both;" />
<div id="Searchresult">
This content will be replaced when pagination inits.
</div>
<div class="pagination searchresult_pagination">
</div>

<!-- Container element for all the Elements that are to be paginated -->
<div id="hiddenresult" style="display:none;">
<div class="result"><p>Globally maximize granular
"outside the box" thinking vis-a-vis quality niches. Proactively formulate 24/7
results whereas 2.0 catalysts for change. Professionally implement 24/365 niches
rather than client-focused users.</p>
<p>
Competently engineer high-payoff "outside the box" thinking through cross
functional benefits. Proactively transition intermandated processes through
open-source niches. Progressively engage maintainable innovation and extensible
interfaces.</p>
</div>
<div class="result"><p>Credibly fabricate e-business models for end-to-end niches.
Compellingly disseminate integrated e-markets without ubiquitous services.
Credibly create equity invested channels with multidisciplinary human capital.</p>
<p>
Interactively integrate competitive users rather than fully tested
infomediaries. Seamlessly initiate premium functionalities rather than impactful
architectures. Rapidiously leverage existing resource-leveling processes via
user-centric portals.</p>
</div>
<div class="result"><p>Monotonectally initiate unique
e-services vis-a-vis client-centric deliverables. Quickly impact parallel
opportunities with B2B bandwidth. Synergistically streamline client-focused
infrastructures rather than B2C e-commerce.</p>
<p>
Phosfluorescently fabricate 24/365 e-business through 24/365 total linkage.
Completely facilitate high-quality systems without stand-alone strategic theme
areas.</p>
</div>
</div>

<div id="footer">
Copyright &copy; 2010 by <a href="http://www.d-scribe.de/">describe europe Ltd.</a>.
</div>
</body>
</html>
27 changes: 15 additions & 12 deletions lib/jquery_pagination/jquery.pagination.js
View file
Expand Up @@ -144,20 +144,23 @@
callback:function(){return false;}
},opts||{});

var containers = this,
renderer, current_page;

return this.each(function() {

var renderer, current_page
container = $(this);
var container = $(this);

/**
* This is the event handling function for the pagination links.
* @param {int} page_id The new page number
*/
function pageSelected(evt){
var current_page = $(evt.target).data('page_id');
container.data('current_page', current_page);
container.empty().append(renderer.getLinks(current_page, pageSelected));
var continuePropagation = opts.callback(current_page, container);
var links, current_page = $(evt.target).data('page_id');
containers.data('current_page', current_page);
links = renderer.getLinks(current_page, pageSelected)
containers.each(function(){ this.empty().append(links.clone())});
var continuePropagation = opts.callback(current_page, containers);
if (!continuePropagation) {
if (evt.stopPropagation) {
evt.stopPropagation();
Expand All @@ -170,7 +173,7 @@
}

current_page = opts.current_page;
container.data('current_page', current_page);
containers.data('current_page', current_page);
// Create a sane value for maxentries and items_per_page
maxentries = (!maxentries || maxentries < 0)?1:maxentries;
opts.items_per_page = (!opts.items_per_page || opts.items_per_page < 0)?1:opts.items_per_page;
Expand All @@ -184,7 +187,7 @@
// Attach control functions to the DOM element
this.selectPage = function(page_id){ pageSelected(page_id);}
this.prevPage = function(){
var current_page = container.data('current_page');
var current_page = containers.data('current_page');
if (current_page > 0) {
pageSelected(current_page - 1);
return true;
Expand All @@ -194,7 +197,7 @@
}
}
this.nextPage = function(){
var current_page = container.data('current_page');
var current_page = containers.data('current_page');
if(current_page < numPages()-1) {
pageSelected(current_page+1);
return true;
Expand All @@ -204,9 +207,9 @@
}
}
// When all initialisation is done, draw the links
container.empty().append(renderer.getLinks(current_page, pageSelected));
// call callback function
opts.callback(current_page, this);
containers.empty().append(renderer.getLinks(current_page, pageSelected));
// call callback function
opts.callback(current_page, containers);
});
}

Expand Down

0 comments on commit a52e192

Please sign in to comment.