The two default pagination styles that DataTables comes with are great for basic tables, but you might which to add extra customisation or a bit of 'glitz'. This plug-in will scroll the table in an animated style.
| Rendering engine | Browser | Platform(s) | Engine version | CSS grade | 
|---|---|---|---|---|
| Trident | Internet Explorer 4.0 | Win 95+ | 4 | X | 
| Trident | Internet Explorer 5.0 | Win 95+ | 5 | C | 
| Trident | Internet Explorer 5.5 | Win 95+ | 5.5 | A | 
| Trident | Internet Explorer 6 | Win 98+ | 6 | A | 
| Trident | Internet Explorer 7 | Win XP SP2+ | 7 | A | 
| Trident | AOL browser (AOL desktop) | Win XP | 6 | A | 
| Gecko | Firefox 1.0 | Win 98+ / OSX.2+ | 1.7 | A | 
| Gecko | Firefox 1.5 | Win 98+ / OSX.2+ | 1.8 | A | 
| Gecko | Firefox 2.0 | Win 98+ / OSX.2+ | 1.8 | A | 
| Gecko | Firefox 3.0 | Win 2k+ / OSX.3+ | 1.9 | A | 
| Gecko | Camino 1.0 | OSX.2+ | 1.8 | A | 
| Gecko | Camino 1.5 | OSX.3+ | 1.8 | A | 
| Gecko | Netscape 7.2 | Win 95+ / Mac OS 8.6-9.2 | 1.7 | A | 
| Gecko | Netscape Browser 8 | Win 98SE+ | 1.7 | A | 
| Gecko | Netscape Navigator 9 | Win 98+ / OSX.2+ | 1.8 | A | 
| Gecko | Mozilla 1.0 | Win 95+ / OSX.1+ | 1 | A | 
| Gecko | Mozilla 1.1 | Win 95+ / OSX.1+ | 1.1 | A | 
| Gecko | Mozilla 1.2 | Win 95+ / OSX.1+ | 1.2 | A | 
| Gecko | Mozilla 1.3 | Win 95+ / OSX.1+ | 1.3 | A | 
| Gecko | Mozilla 1.4 | Win 95+ / OSX.1+ | 1.4 | A | 
| Gecko | Mozilla 1.5 | Win 95+ / OSX.1+ | 1.5 | A | 
| Gecko | Mozilla 1.6 | Win 95+ / OSX.1+ | 1.6 | A | 
| Gecko | Mozilla 1.7 | Win 98+ / OSX.1+ | 1.7 | A | 
| Gecko | Mozilla 1.8 | Win 98+ / OSX.1+ | 1.8 | A | 
| Gecko | Seamonkey 1.1 | Win 98+ / OSX.2+ | 1.8 | A | 
| Gecko | Epiphany 2.20 | Gnome | 1.8 | A | 
| Webkit | Safari 1.2 | OSX.3 | 125.5 | A | 
| Webkit | Safari 1.3 | OSX.3 | 312.8 | A | 
| Webkit | Safari 2.0 | OSX.4+ | 419.3 | A | 
| Webkit | Safari 3.0 | OSX.4+ | 522.1 | A | 
| Webkit | OmniWeb 5.5 | OSX.4+ | 420 | A | 
| Webkit | iPod Touch / iPhone | iPod | 420.1 | A | 
| Webkit | S60 | S60 | 413 | A | 
| Presto | Opera 7.0 | Win 95+ / OSX.1+ | - | A | 
| Presto | Opera 7.5 | Win 95+ / OSX.2+ | - | A | 
| Presto | Opera 8.0 | Win 95+ / OSX.2+ | - | A | 
| Presto | Opera 8.5 | Win 95+ / OSX.2+ | - | A | 
| Presto | Opera 9.0 | Win 95+ / OSX.3+ | - | A | 
| Presto | Opera 9.2 | Win 88+ / OSX.3+ | - | A | 
| Presto | Opera 9.5 | Win 88+ / OSX.3+ | - | A | 
| Presto | Opera for Wii | Wii | - | A | 
| Presto | Nokia N800 | N800 | - | A | 
| Presto | Nintendo DS browser | Nintendo DS | 8.5 | C/A1 | 
| KHTML | Konqureror 3.1 | KDE 3.1 | 3.1 | C | 
| KHTML | Konqureror 3.3 | KDE 3.3 | 3.3 | A | 
| KHTML | Konqureror 3.5 | KDE 3.5 | 3.5 | A | 
| Tasman | Internet Explorer 4.5 | Mac OS 8-9 | - | X | 
| Tasman | Internet Explorer 5.1 | Mac OS 7.6-9 | 1 | C | 
| Tasman | Internet Explorer 5.2 | Mac OS 8-X | 1 | C | 
| Misc | NetFront 3.1 | Embedded devices | - | C | 
| Misc | NetFront 3.4 | Embedded devices | - | A | 
| Misc | Dillo 0.8 | Embedded devices | - | X | 
| Misc | Links | Text only | - | X | 
| Misc | Lynx | Text only | - | X | 
| Misc | IE Mobile | Windows Mobile 6 | - | C | 
| Misc | PSP browser | PSP | - | C | 
| Other browsers | All others | - | - | U | 
| Rendering engine | Browser | Platform(s) | Engine version | CSS grade | 
/* Time between each scrolling frame */
$.fn.dataTableExt.oPagination.iTweenTime = 100;
$.fn.dataTableExt.oPagination.scrolling = {
	"fnInit": function ( oSettings, nPaging, fnCallbackDraw )
	{
		/* Store the next and previous elements in the oSettings object as they can be very
		 * usful for automation - particularly testing
		 */
		var nPrevious = document.createElement( 'div' );
		var nNext = document.createElement( 'div' );
		
		if ( oSettings.sTableId !== '' )
		{
			nPaging.setAttribute( 'id', oSettings.sTableId+'_paginate' );
			nPrevious.setAttribute( 'id', oSettings.sTableId+'_previous' );
			nNext.setAttribute( 'id', oSettings.sTableId+'_next' );
		}
		
		nPrevious.className = "paginate_disabled_previous";
		nNext.className = "paginate_disabled_next";
		
		nPrevious.title = oSettings.oLanguage.oPaginate.sPrevious;
		nNext.title = oSettings.oLanguage.oPaginate.sNext;
		
		nPaging.appendChild( nPrevious );
		nPaging.appendChild( nNext );
		
		$(nPrevious).click( function() {
			/* Disallow paging event during a current paging event */
			if ( typeof oSettings.iPagingLoopStart != 'undefined' && oSettings.iPagingLoopStart != -1 )
			{
				return;
			}
			
			oSettings.iPagingLoopStart = oSettings._iDisplayStart;
			oSettings.iPagingEnd = oSettings._iDisplayStart - oSettings._iDisplayLength;
			
			/* Correct for underrun */
			if ( oSettings.iPagingEnd < 0 )
			{
			  oSettings.iPagingEnd = 0;
			}
			
			var iTween = $.fn.dataTableExt.oPagination.iTweenTime;
			var innerLoop = function () {
				if ( oSettings.iPagingLoopStart > oSettings.iPagingEnd ) {
					oSettings.iPagingLoopStart--;
					oSettings._iDisplayStart = oSettings.iPagingLoopStart;
					fnCallbackDraw( oSettings );
					setTimeout( function() { innerLoop(); }, iTween );
				} else {
					oSettings.iPagingLoopStart = -1;
				}
			};
			innerLoop();
		} );
		
		$(nNext).click( function() {
			/* Disallow paging event during a current paging event */
			if ( typeof oSettings.iPagingLoopStart != 'undefined' && oSettings.iPagingLoopStart != -1 )
			{
				return;
			}
			
			oSettings.iPagingLoopStart = oSettings._iDisplayStart;
			
			/* Make sure we are not over running the display array */
			if ( oSettings._iDisplayStart + oSettings._iDisplayLength < oSettings.fnRecordsDisplay() )
			{
				oSettings.iPagingEnd = oSettings._iDisplayStart + oSettings._iDisplayLength;
			}
			
			var iTween = $.fn.dataTableExt.oPagination.iTweenTime;
			var innerLoop = function () {
				if ( oSettings.iPagingLoopStart < oSettings.iPagingEnd ) {
					oSettings.iPagingLoopStart++;
					oSettings._iDisplayStart = oSettings.iPagingLoopStart;
					fnCallbackDraw( oSettings );
					setTimeout( function() { innerLoop(); }, iTween );
				} else {
					oSettings.iPagingLoopStart = -1;
				}
			};
			innerLoop();
		} );
		
		/* Take the brutal approach to cancelling text selection */
		$(nPrevious).bind( 'selectstart', function () { return false; } );
		$(nNext).bind( 'selectstart', function () { return false; } );
	},
	
	"fnUpdate": function ( oSettings, fnCallbackDraw )
	{
		if ( !oSettings.aanFeatures.p )
		{
			return;
		}
		
		/* Loop over each instance of the pager */
		var an = oSettings.aanFeatures.p;
		for ( var i=0, iLen=an.length ; i<iLen ; i++ )
		{
			if ( an[i].childNodes.length !== 0 )
			{
				an[i].childNodes[0].className = 
					( oSettings._iDisplayStart === 0 ) ? 
					oSettings.oClasses.sPagePrevDisabled : oSettings.oClasses.sPagePrevEnabled;
				
				an[i].childNodes[1].className = 
					( oSettings.fnDisplayEnd() == oSettings.fnRecordsDisplay() ) ? 
					oSettings.oClasses.sPageNextDisabled : oSettings.oClasses.sPageNextEnabled;
			}
		}
	}
}
$(document).ready(function() {
	$('#example').dataTable( {
		"sPaginationType": "scrolling"
	} );
} );