Pagination of data: the creative alternative!

Page numbers are obsolete and aesthetics killers, for this facebook and tweeter doesn’t have them: they have just one button like “see more…”

A button? We can do better guys! Yes there are methods to load data onscroll, but i think this, is like the “more…” button, just a little fancier, but not perfect and not pratical when you wanna go deep in a shoot (imagine that i want to see my 6 months ago tweets)…

So here comes my idea, my personal pagination alternative method to the page numbers links: a Slider…! with numbers…. (or a time machine if you prefer)

IMHO that’s fit to be the more comfortable user interface to explore very big result sets (to navigate across a huge data) and is also nice:


<script language="text/javascript">
var queuedSliderChange=null; //per paging slider
 
dojo.addOnLoad(function(){
 
/*
 * Estendo l'oggetto dojo slider per modificare la gestione degli intermediateChanges in modo tale che non faccia una richiesta ajax ma che aggiorni il page_num
 */
 dojo.declare("ste.paging.slider", dijit.form.HorizontalSlider, {
 	_handleOnChange: function(/*anything*/ newValue, /*Boolean, optional*/ priorityChange){
		// summary: set the value of the widget.
		this._lastValue = newValue;
		if(this._lastValueReported == undefined && (priorityChange === null || !this._onChangeActive)){
			this._resetValue = this._lastValueReported = newValue;
		}
		if((this.intermediateChanges||priorityChange||priorityChange===undefined)&&((typeof newValue !=typeof this._lastValueReported)||this.compare(newValue,this._lastValueReported)!=0)){
this._lastValueReported=newValue;
			if (this.intermediateChanges)  
			/*blocco modificato da Ste*/
			{
				dojo.byId(this.pageIndicator).innerHTML=newValue;	
			}
			if(this._onChangeActive){ 
						if(queuedSliderChange!=null){clearTimeout(queuedSliderChange);}
						a=this;
						queuedSliderChange=setTimeout(function(){a.onChange(newValue);},500); 
			}
		}
	},
	pageIndicator: "", /*l oggetto dom in cui scrivere il valore della pagina durante lo sliding da settare via HTML (ste mod!)*/
 	setValue: function(/*Number*/ value, /*Boolean, optional*/ priorityChange){
	       if(priorityChange){ /*ste patch*/
			this.onChange(value); 
		}
 
			this.valueNode.value = this.value = value;
		dijit.setWaiState(this.focusNode, "valuenow", value);
		this.inherited(arguments);
		var percent = (value - this.minimum) / (this.maximum - this.minimum);
		var progressBar = (this._descending === false) ? this.remainingBar : this.progressBar;
		var remainingBar = (this._descending === false) ? this.progressBar : this.remainingBar;
		if(priorityChange && this.slideDuration > 0 && progressBar.style[this._progressPixelSize]){
			// animate the slider
			var _this = this;
			var props = {};
			var start = parseFloat(progressBar.style[this._progressPixelSize]);
			var duration = this.slideDuration * (percent-start/100);
			if(duration == 0){ return; }
			if(duration < 0){ duration = 0 - duration; }
			props[this._progressPixelSize] = { start: start, end: percent*100, units:"%" };
			dojo.animateProperty({ node: progressBar, duration: duration, 
				onAnimate: function(v){ remainingBar.style[_this._progressPixelSize] = (100-parseFloat(v[_this._progressPixelSize])) + "%"; },
			        properties: props
			}).play();
		}
		else{
			progressBar.style[this._progressPixelSize] = (percent*100) + "%";
			remainingBar.style[this._progressPixelSize] = ((1-percent)*100) + "%";
		}
	 
 
	}
 
 });
</script>

and this is a widget usage demo: a php ajax server page that prints this dojo widget to reparse and the result of the query (see the video below for the final result):

<?php
// here there is  the query count() and the real limited  query (like any normal paging)

$toOutput['pager'] = 'Page <b><span id="pagenum">'.$currentOffset.'</span></b> of <span id="ofpages">'.$queryTotalCount.'</span> <div dojoType="ste.paging.slider" name="horizontal1" onChange="getTablePage(arguments[0]);" value="1" discreteValues="'.$queryTotalCount.' " maximum="'.$queryTotalCount.'" minimum="1" pageIncrement="1" showButtons="true" pageIndicator="pagenum" intermediateChanges="true" style="width:50%; height: 30px;" id="pageslider"> </div>

$toOutput['queryResults']= // some logic to return the db rows to the client...

echo json_encode($toOutput); //did you know that i love JSON?
?> 

PS. you can use this code also for doing a lot of things: e.g. to display the current value for a slider used to set a value as you can see in the last part of the screencast.

Enjoy your impressive sliding pager!

7 pensieri su “Pagination of data: the creative alternative!

  1. Pingback: Tweets that mention creativeprogramming.it » Archive » awesome page slider with dojo -- Topsy.com

  2. You’re kidding, right? You just replaced the “previous” and “next” buttons with tiny little arrows and a slider in between where there used to be numbers. This is actually less efficient, UX wise, than the classic method. It doesn’t allow for (easy) keyboard navigation, it’s very clumsy to go to a specific page (you need to twiddle arround a few pixels) to name a few. Sliders are great for “volume controls” or stuff that doesn’t require exact input. Sliders as a means of pagination alternative: Nah. Thanks for trying though! :-)

    • Yes i just replaced it, like google image replaced it with the “browser slider”…. but think: you can reach page 543 of 2300 in a few seconds, instead with the “1, 2, 3 … 2300″ buttons you cannot click a page in the middle of huge data.

    • and another thing: i used dojo to realize this, and dojo slider si ARIA accessible, and you can use keyboard to navigate in it, in a lot easy manner (and a lot powerfull) than in a list of buttons with some “……” in the middle

  3. I like the concept. I am just reverted to this article from the tympanus’s article about slider pagination and your comment. I am sorry that you were disappointed with the negative comment by @robiii.

    The negative comment is with no base and your concept is a brilliant one. Please do yourself a favor and never care the baseless comments with no logic

    Thank you!

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>