Bootstrap + Foundation integraiton update for DataTables 1.10

- Add a pageButton renderer to the foundation integration script - Add foundation example HTML page (links need to be updated) - Correct errors in Bootstrap integration for ellispsis click and page title
11 years ago · 45c45f9b41
parent 8c95e4ad14
commit 45c45f9b41
5 changed files with 686 additions and 131 deletions
--- a/integration/bootstrap/3/dataTables.bootstrap.js
+++ b/integration/bootstrap/3/dataTables.bootstrap.js
@ -1,6 +1,9 @@
 /* Set the defaults for DataTables initialisation */
 $.extend( true, $.fn.dataTable.defaults, {
-	"sDom": "<'row'<'col-xs-6'l><'col-xs-6'f>r>t<'row'<'col-xs-6'i><'col-xs-6'p>>",
+	"sDom":
+		"<'row'<'col-xs-6'l><'col-xs-6'f>r>"+
+		"t"+
+		"<'row'<'col-xs-6'i><'col-xs-6'p>>",
 	"oLanguage": {
 		"sLengthMenu": "_MENU_ records per page"
 	}
@ -27,7 +30,10 @@ if ( $.fn.dataTable.Api ) {
 		var attach = function( container, buttons ) {
 			var i, ien, node, button;
 			var clickHandler = function ( e ) {
-				api.page( e.data.action ).draw( false );
+				e.preventDefault();
+				if ( e.data.action !== 'ellipsis' ) {
+					api.page( e.data.action ).draw( false );
+				}
 			};

 			for ( i=0, ien=buttons.length ; i<ien ; i++ ) {
@ -42,7 +48,8 @@ if ( $.fn.dataTable.Api ) {

 					switch ( button ) {
 						case 'ellipsis':
-							container.append('<span>&hellip;</span>');
+							btnDisplay = '&hellip;';
+							btnClass = 'disabled';
 							break;

 						case 'first':
--- a/integration/bootstrap/3/index.html
+++ b/integration/bootstrap/3/index.html
@ -3,13 +3,14 @@
 	<head>
 		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 		
-		<title>DataTables Bootstrap 2 example</title>
+		<title>DataTables Bootstrap 3 example</title>

-		<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap.min.css">
+		<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
 		<link rel="stylesheet" type="text/css" href="dataTables.bootstrap.css">

-		<script type="text/javascript" language="javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
-		<script type="text/javascript" language="javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
+		<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
+		<!--<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10-dev/js/jquery.dataTables.js"></script>-->
+		<script type="text/javascript" language="javascript" src="/dataTables/DataTablesSrc/built/js/jquery.dataTables.js"></script>
 		<script type="text/javascript" language="javascript" src="dataTables.bootstrap.js"></script>
 		<script type="text/javascript" charset="utf-8">
 			$(document).ready(function() {
--- a/integration/foundation/dataTables.foundation.css
+++ b/integration/foundation/dataTables.foundation.css
@ -9,24 +9,25 @@ div.dataTables_info {
 	font-weight: normal;
 }

-div.dataTables_length {
-	padding-top: 6px;
-}
 div.dataTables_length label {
 	float: left;
 	text-align: left;
+	margin-bottom: 0;
 }

 div.dataTables_length select {
 	width: 75px;
+	margin-bottom: 0;
 }

 div.dataTables_filter label {
 	float: right;
+	margin-bottom: 0;
 }
 div.dataTables_filter input {
 	display: inline-block !important;
 	width: auto !important;
+	margin-bottom: 0;
 }

 div.dataTables_info {
@ -41,7 +42,7 @@ div.dataTables_paginate {

 table.dataTable {
 	clear: both;
-	margin-bottom: 0.5em !important;
+	margin: 0.5em 0 !important;
 	max-width: none !important;
 	width: 100%;
 }
--- a/integration/foundation/dataTables.foundation.js
+++ b/integration/foundation/dataTables.foundation.js
@ -4,153 +4,254 @@ $.extend( true, $.fn.dataTable.defaults, {
 		"<'row'<'large-6 columns'l><'large-6 columns'f>r>"+
 		"t"+
 		"<'row'<'large-6 columns'i><'large-6 columns'p>>",
-	"sPaginationType": "bootstrap",
 	"oLanguage": {
 		"sLengthMenu": "_MENU_ records per page"
 	}
 } );


-/* API method to get paging information */
-$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
-{
-	return {
-		"iStart":         oSettings._iDisplayStart,
-		"iEnd":           oSettings.fnDisplayEnd(),
-		"iLength":        oSettings._iDisplayLength,
-		"iTotal":         oSettings.fnRecordsTotal(),
-		"iFilteredTotal": oSettings.fnRecordsDisplay(),
-		"iPage":          oSettings._iDisplayLength === -1 ?
-			0 : Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
-		"iTotalPages":    oSettings._iDisplayLength === -1 ?
-			0 : Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
-	};
-};

+// In 1.10 we use the pagination renderers to draw the Bootstrap paging,
+// rather than  custom plug-in
+if ( $.fn.dataTable.Api ) {
+	$.fn.dataTable.defaults.renderer = 'foundation';
+	$.fn.dataTable.ext.renderer.pageButton.foundation = function ( settings, host, idx, buttons, page, pages ) {
+		var api = new $.fn.dataTable.Api( settings );
+		var classes = settings.oClasses;
+		var lang = settings.oLanguage.oPaginate;
+		var btnDisplay, btnClass;

-/* Bootstrap style pagination control */
-$.extend( $.fn.dataTableExt.oPagination, {
-	"bootstrap": {
-		"fnInit": function( oSettings, nPaging, fnDraw ) {
-			var oLang = oSettings.oLanguage.oPaginate;
-			var fnClickHandler = function ( e ) {
+		var attach = function( container, buttons ) {
+			var i, ien, node, button;
+			var clickHandler = function ( e ) {
 				e.preventDefault();
-				if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
-					fnDraw( oSettings );
+				if ( e.data.action !== 'ellipsis' ) {
+					api.page( e.data.action ).draw( false );
 				}
 			};

-			$(nPaging).append(
-				'<ul class="pagination">'+
-					'<li class="prev arrow unavailable"><a href="">&laquo;</a></li>'+
-					'<li class="next arrow unavailable"><a href="">&raquo;</a></li>'+
-				'</ul>'
-			);
-			var els = $('a', nPaging);
-			$(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
-			$(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler );
-		},
+			for ( i=0, ien=buttons.length ; i<ien ; i++ ) {
+				button = buttons[i];

-		"fnUpdate": function ( oSettings, fnDraw ) {
-			var iListLength = 5;
-			var oPaging = oSettings.oInstance.fnPagingInfo();
-			var an = oSettings.aanFeatures.p;
-			var pages = [];
-			var i, ien, klass, host;
-
-			// This could use some improving - however, see
-			// https://github.com/DataTables/DataTables/issues/163 - this will
-			// be changing in the near future, so not much point in doing too
-			// much just now
-			if ( oPaging.iTotalPages <= 6 ) {
-				for ( i=0 ; i<oPaging.iTotalPages ; i++ ) {
-					pages.push( i );
-				}
-			}
-			else {
-				// Current page
-				pages.push( oPaging.iPage );
-
-				// After current page
-				var pagesAfter = oPaging.iPage + 2 >= oPaging.iTotalPages ?
-					oPaging.iTotalPages :
-					oPaging.iPage + 2;
-				for ( i=oPaging.iPage+1 ; i<pagesAfter ; i++ ) {
-					pages.push( i );
+				if ( $.isArray( button ) ) {
+					attach( container, button );
 				}
+				else {
+					btnDisplay = '';
+					btnClass = '';

-				// After gap
-				if ( pagesAfter < oPaging.iTotalPages-2 ) {
-					pages.push( null );
-				}
+					switch ( button ) {
+						case 'ellipsis':
+							btnDisplay = '&hellip;';
+							btnClass = 'unavailable';
+							break;

-				// End
-				if ( $.inArray( oPaging.iTotalPages-2, pages ) === -1 && oPaging.iPage < oPaging.iTotalPages-2 ) {
-					pages.push( oPaging.iTotalPages-2 );
-				}
-				if ( $.inArray( oPaging.iTotalPages-1, pages ) === -1 ) {
-					pages.push( oPaging.iTotalPages-1 );
-				}
+						case 'first':
+							btnDisplay = lang.sFirst;
+							btnClass = button + (page > 0 ?
+								'' : ' unavailable');
+							break;

-				// Pages before
-				var pagesBefore = oPaging.iPage - 2 > 0 ?
-					oPaging.iPage - 2 :
-					0;
-				for ( i=oPaging.iPage-1 ; i>pagesBefore ; i-- ) {
-					pages.unshift( i );
-				}
+						case 'previous':
+							btnDisplay = lang.sPrevious;
+							btnClass = button + (page > 0 ?
+								'' : ' unavailable');
+							break;

-				// Before gap
-				if ( pagesBefore > 1 ) {
-					pages.unshift( null );
-				}
+						case 'next':
+							btnDisplay = lang.sNext;
+							btnClass = button + (page < pages-1 ?
+								'' : ' unavailable');
+							break;

-				// Start
-				if ( $.inArray( 1, pages ) === -1 && oPaging.iTotalPages > 1 ) {
-					pages.unshift( 1 );
-				}
-				if ( $.inArray( 0, pages ) === -1 ) {
-					pages.unshift( 0 );
+						case 'last':
+							btnDisplay = lang.sLast;
+							btnClass = button + (page < pages-1 ?
+								'' : ' unavailable');
+							break;
+
+						default:
+							btnDisplay = button + 1;
+							btnClass = page === button ?
+								'current' : '';
+							break;
+					}
+
+					if ( btnDisplay ) {
+						node = $('<li>', {
+								'class': classes.sPageButton+' '+btnClass,
+								'aria-controls': settings.sTableId,
+								'tabindex': settings.iTabIndex,
+								'id': idx === 0 && typeof button === 'string' ?
+									settings.sTableId +'_'+ button :
+									null
+							} )
+							.append( $('<a>', {
+									'href': '#'
+								} )
+								.html( btnDisplay )
+							)
+							.appendTo( container );
+
+						settings.oApi._fnBindAction(
+							node, {action: button}, clickHandler
+						);
+					}
 				}
 			}
+		};
+
+		attach(
+			$(host).empty().html('<ul class="pagination"/>').children('ul'),
+			buttons
+		);
+	}
+}
+else {
+	// Integration for 1.9-
+	$.fn.dataTable.defaults.sPaginationType = 'foundation';
+
+	/* API method to get paging information */
+	$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
+	{
+		return {
+			"iStart":         oSettings._iDisplayStart,
+			"iEnd":           oSettings.fnDisplayEnd(),
+			"iLength":        oSettings._iDisplayLength,
+			"iTotal":         oSettings.fnRecordsTotal(),
+			"iFilteredTotal": oSettings.fnRecordsDisplay(),
+			"iPage":          oSettings._iDisplayLength === -1 ?
+				0 : Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
+			"iTotalPages":    oSettings._iDisplayLength === -1 ?
+				0 : Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
+		};
+	};

-			for ( i=0, ien=an.length ; i<ien ; i++ ) {
-				// Remove the middle elements
-				host = an[i];
-				$('li:gt(0)', host).filter(':not(:last)').remove();
-
-				// Add the new list items and their event handlers
-				$.each( pages, function( i, page ) {
-					klass = page === null ? 'unavailable' :
-						page === oPaging.iPage ? 'current' : '';
-					$('<li class="'+klass+'"><a href="">'+(page===null? '&hellip;' : page+1)+'</a></li>')
-						.insertBefore( $('li:last', host) )
-						.bind('click', function (e) {
-							e.preventDefault();
-							var pageNum = parseInt($('a', this).text(),10);
-							if ( ! isNaN(pageNum)) {
-								oSettings._iDisplayStart = (pageNum-1) * oPaging.iLength;
-								fnDraw( oSettings );
-							}
-						} );
-				} );
-
-				// Add / remove disabled classes from the static elements
-				if ( oPaging.iPage === 0 ) {
-					$('li:first', host).addClass('unavailable');
-				} else {
-					$('li:first', host).removeClass('unavailable');
+
+	/* Bootstrap style pagination control */
+	$.extend( $.fn.dataTableExt.oPagination, {
+		"foundation": {
+			"fnInit": function( oSettings, nPaging, fnDraw ) {
+				var oLang = oSettings.oLanguage.oPaginate;
+				var fnClickHandler = function ( e ) {
+					e.preventDefault();
+					if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
+						fnDraw( oSettings );
+					}
+				};
+
+				$(nPaging).append(
+					'<ul class="pagination">'+
+						'<li class="prev arrow unavailable"><a href="">&laquo;</a></li>'+
+						'<li class="next arrow unavailable"><a href="">&raquo;</a></li>'+
+					'</ul>'
+				);
+				var els = $('a', nPaging);
+				$(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
+				$(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler );
+			},
+
+			"fnUpdate": function ( oSettings, fnDraw ) {
+				var iListLength = 5;
+				var oPaging = oSettings.oInstance.fnPagingInfo();
+				var an = oSettings.aanFeatures.p;
+				var pages = [];
+				var i, ien, klass, host;
+
+				// This could use some improving - however, see
+				// https://github.com/DataTables/DataTables/issues/163 - this will
+				// be changing in the near future, so not much point in doing too
+				// much just now
+				if ( oPaging.iTotalPages <= 6 ) {
+					for ( i=0 ; i<oPaging.iTotalPages ; i++ ) {
+						pages.push( i );
+					}
+				}
+				else {
+					// Current page
+					pages.push( oPaging.iPage );
+
+					// After current page
+					var pagesAfter = oPaging.iPage + 2 >= oPaging.iTotalPages ?
+						oPaging.iTotalPages :
+						oPaging.iPage + 2;
+					for ( i=oPaging.iPage+1 ; i<pagesAfter ; i++ ) {
+						pages.push( i );
+					}
+
+					// After gap
+					if ( pagesAfter < oPaging.iTotalPages-2 ) {
+						pages.push( null );
+					}
+
+					// End
+					if ( $.inArray( oPaging.iTotalPages-2, pages ) === -1 && oPaging.iPage < oPaging.iTotalPages-2 ) {
+						pages.push( oPaging.iTotalPages-2 );
+					}
+					if ( $.inArray( oPaging.iTotalPages-1, pages ) === -1 ) {
+						pages.push( oPaging.iTotalPages-1 );
+					}
+
+					// Pages before
+					var pagesBefore = oPaging.iPage - 2 > 0 ?
+						oPaging.iPage - 2 :
+						0;
+					for ( i=oPaging.iPage-1 ; i>pagesBefore ; i-- ) {
+						pages.unshift( i );
+					}
+
+					// Before gap
+					if ( pagesBefore > 1 ) {
+						pages.unshift( null );
+					}
+
+					// Start
+					if ( $.inArray( 1, pages ) === -1 && oPaging.iTotalPages > 1 ) {
+						pages.unshift( 1 );
+					}
+					if ( $.inArray( 0, pages ) === -1 ) {
+						pages.unshift( 0 );
+					}
 				}

-				if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
-					$('li:last', host).addClass('unavailable');
-				} else {
-					$('li:last', host).removeClass('unavailable');
+				for ( i=0, ien=an.length ; i<ien ; i++ ) {
+					// Remove the middle elements
+					host = an[i];
+					$('li:gt(0)', host).filter(':not(:last)').remove();
+
+					// Add the new list items and their event handlers
+					$.each( pages, function( i, page ) {
+						klass = page === null ? 'unavailable' :
+							page === oPaging.iPage ? 'current' : '';
+						$('<li class="'+klass+'"><a href="">'+(page===null? '&hellip;' : page+1)+'</a></li>')
+							.insertBefore( $('li:last', host) )
+							.bind('click', function (e) {
+								e.preventDefault();
+								var pageNum = parseInt($('a', this).text(),10);
+								if ( ! isNaN(pageNum)) {
+									oSettings._iDisplayStart = (pageNum-1) * oPaging.iLength;
+									fnDraw( oSettings );
+								}
+							} );
+					} );
+
+					// Add / remove disabled classes from the static elements
+					if ( oPaging.iPage === 0 ) {
+						$('li:first', host).addClass('unavailable');
+					} else {
+						$('li:first', host).removeClass('unavailable');
+					}
+
+					if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
+						$('li:last', host).addClass('unavailable');
+					} else {
+						$('li:last', host).removeClass('unavailable');
+					}
 				}
 			}
 		}
-	}
-} );
+	} );
+}


 /*
--- a/integration/foundation/index.html
+++ b/integration/foundation/index.html
@ -0,0 +1,445 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+	<head>
+		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+		
+		<title>DataTables Foundation example</title>
+
+		<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/css/foundation.min.css">
+		<link rel="stylesheet" type="text/css" href="dataTables.foundation.css">
+
+		<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
+		<!--<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10-dev/js/jquery.dataTables.js"></script>-->
+		<script type="text/javascript" language="javascript" src="/dataTables/DataTablesSrc/built/js/jquery.dataTables.js"></script>
+		<script type="text/javascript" language="javascript" src="dataTables.foundation.js"></script>
+		<script type="text/javascript" charset="utf-8">
+			$(document).ready(function() {
+				$('#example').dataTable();
+			} );
+		</script>
+	</head>
+	<body>
+		<div class="row">
+			<div class="large-12 columns">
+
+<table cellpadding="0" cellspacing="0" border="0" class="tdisplay" id="example">
+	<thead>
+		<tr>
+			<th>Rendering engine</th>
+			<th>Browser</th>
+			<th>Platform(s)</th>
+			<th>Engine version</th>
+			<th>CSS grade</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr class="odd gradeX">
+			<td>Trident</td>
+			<td>Internet
+				 Explorer 4.0</td>
+			<td>Win 95+</td>
+			<td class="center"> 4</td>
+			<td class="center">X</td>
+		</tr>
+		<tr class="even gradeC">
+			<td>Trident</td>
+			<td>Internet
+				 Explorer 5.0</td>
+			<td>Win 95+</td>
+			<td class="center">5</td>
+			<td class="center">C</td>
+		</tr>
+		<tr class="odd gradeA">
+			<td>Trident</td>
+			<td>Internet
+				 Explorer 5.5</td>
+			<td>Win 95+</td>
+			<td class="center">5.5</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="even gradeA">
+			<td>Trident</td>
+			<td>Internet
+				 Explorer 6</td>
+			<td>Win 98+</td>
+			<td class="center">6</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="odd gradeA">
+			<td>Trident</td>
+			<td>Internet Explorer 7</td>
+			<td>Win XP SP2+</td>
+			<td class="center">7</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="even gradeA">
+			<td>Trident</td>
+			<td>AOL browser (AOL desktop)</td>
+			<td>Win XP</td>
+			<td class="center">6</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Gecko</td>
+			<td>Firefox 1.0</td>
+			<td>Win 98+ / OSX.2+</td>
+			<td class="center">1.7</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Gecko</td>
+			<td>Firefox 1.5</td>
+			<td>Win 98+ / OSX.2+</td>
+			<td class="center">1.8</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Gecko</td>
+			<td>Firefox 2.0</td>
+			<td>Win 98+ / OSX.2+</td>
+			<td class="center">1.8</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Gecko</td>
+			<td>Firefox 3.0</td>
+			<td>Win 2k+ / OSX.3+</td>
+			<td class="center">1.9</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Gecko</td>
+			<td>Camino 1.0</td>
+			<td>OSX.2+</td>
+			<td class="center">1.8</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Gecko</td>
+			<td>Camino 1.5</td>
+			<td>OSX.3+</td>
+			<td class="center">1.8</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Gecko</td>
+			<td>Netscape 7.2</td>
+			<td>Win 95+ / Mac OS 8.6-9.2</td>
+			<td class="center">1.7</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Gecko</td>
+			<td>Netscape Browser 8</td>
+			<td>Win 98SE+</td>
+			<td class="center">1.7</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Gecko</td>
+			<td>Netscape Navigator 9</td>
+			<td>Win 98+ / OSX.2+</td>
+			<td class="center">1.8</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Gecko</td>
+			<td>Mozilla 1.0</td>
+			<td>Win 95+ / OSX.1+</td>
+			<td class="center">1</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Gecko</td>
+			<td>Mozilla 1.1</td>
+			<td>Win 95+ / OSX.1+</td>
+			<td class="center">1.1</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Gecko</td>
+			<td>Mozilla 1.2</td>
+			<td>Win 95+ / OSX.1+</td>
+			<td class="center">1.2</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Gecko</td>
+			<td>Mozilla 1.3</td>
+			<td>Win 95+ / OSX.1+</td>
+			<td class="center">1.3</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Gecko</td>
+			<td>Mozilla 1.4</td>
+			<td>Win 95+ / OSX.1+</td>
+			<td class="center">1.4</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Gecko</td>
+			<td>Mozilla 1.5</td>
+			<td>Win 95+ / OSX.1+</td>
+			<td class="center">1.5</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Gecko</td>
+			<td>Mozilla 1.6</td>
+			<td>Win 95+ / OSX.1+</td>
+			<td class="center">1.6</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Gecko</td>
+			<td>Mozilla 1.7</td>
+			<td>Win 98+ / OSX.1+</td>
+			<td class="center">1.7</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Gecko</td>
+			<td>Mozilla 1.8</td>
+			<td>Win 98+ / OSX.1+</td>
+			<td class="center">1.8</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Gecko</td>
+			<td>Seamonkey 1.1</td>
+			<td>Win 98+ / OSX.2+</td>
+			<td class="center">1.8</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Gecko</td>
+			<td>Epiphany 2.20</td>
+			<td>Gnome</td>
+			<td class="center">1.8</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Webkit</td>
+			<td>Safari 1.2</td>
+			<td>OSX.3</td>
+			<td class="center">125.5</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Webkit</td>
+			<td>Safari 1.3</td>
+			<td>OSX.3</td>
+			<td class="center">312.8</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Webkit</td>
+			<td>Safari 2.0</td>
+			<td>OSX.4+</td>
+			<td class="center">419.3</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Webkit</td>
+			<td>Safari 3.0</td>
+			<td>OSX.4+</td>
+			<td class="center">522.1</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Webkit</td>
+			<td>OmniWeb 5.5</td>
+			<td>OSX.4+</td>
+			<td class="center">420</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Webkit</td>
+			<td>iPod Touch / iPhone</td>
+			<td>iPod</td>
+			<td class="center">420.1</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Webkit</td>
+			<td>S60</td>
+			<td>S60</td>
+			<td class="center">413</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Presto</td>
+			<td>Opera 7.0</td>
+			<td>Win 95+ / OSX.1+</td>
+			<td class="center">-</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Presto</td>
+			<td>Opera 7.5</td>
+			<td>Win 95+ / OSX.2+</td>
+			<td class="center">-</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Presto</td>
+			<td>Opera 8.0</td>
+			<td>Win 95+ / OSX.2+</td>
+			<td class="center">-</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Presto</td>
+			<td>Opera 8.5</td>
+			<td>Win 95+ / OSX.2+</td>
+			<td class="center">-</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Presto</td>
+			<td>Opera 9.0</td>
+			<td>Win 95+ / OSX.3+</td>
+			<td class="center">-</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Presto</td>
+			<td>Opera 9.2</td>
+			<td>Win 88+ / OSX.3+</td>
+			<td class="center">-</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Presto</td>
+			<td>Opera 9.5</td>
+			<td>Win 88+ / OSX.3+</td>
+			<td class="center">-</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Presto</td>
+			<td>Opera for Wii</td>
+			<td>Wii</td>
+			<td class="center">-</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Presto</td>
+			<td>Nokia N800</td>
+			<td>N800</td>
+			<td class="center">-</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Presto</td>
+			<td>Nintendo DS browser</td>
+			<td>Nintendo DS</td>
+			<td class="center">8.5</td>
+			<td class="center">C/A<sup>1</sup></td>
+		</tr>
+		<tr class="gradeC">
+			<td>KHTML</td>
+			<td>Konqureror 3.1</td>
+			<td>KDE 3.1</td>
+			<td class="center">3.1</td>
+			<td class="center">C</td>
+		</tr>
+		<tr class="gradeA">
+			<td>KHTML</td>
+			<td>Konqureror 3.3</td>
+			<td>KDE 3.3</td>
+			<td class="center">3.3</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeA">
+			<td>KHTML</td>
+			<td>Konqureror 3.5</td>
+			<td>KDE 3.5</td>
+			<td class="center">3.5</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeX">
+			<td>Tasman</td>
+			<td>Internet Explorer 4.5</td>
+			<td>Mac OS 8-9</td>
+			<td class="center">-</td>
+			<td class="center">X</td>
+		</tr>
+		<tr class="gradeC">
+			<td>Tasman</td>
+			<td>Internet Explorer 5.1</td>
+			<td>Mac OS 7.6-9</td>
+			<td class="center">1</td>
+			<td class="center">C</td>
+		</tr>
+		<tr class="gradeC">
+			<td>Tasman</td>
+			<td>Internet Explorer 5.2</td>
+			<td>Mac OS 8-X</td>
+			<td class="center">1</td>
+			<td class="center">C</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Misc</td>
+			<td>NetFront 3.1</td>
+			<td>Embedded devices</td>
+			<td class="center">-</td>
+			<td class="center">C</td>
+		</tr>
+		<tr class="gradeA">
+			<td>Misc</td>
+			<td>NetFront 3.4</td>
+			<td>Embedded devices</td>
+			<td class="center">-</td>
+			<td class="center">A</td>
+		</tr>
+		<tr class="gradeX">
+			<td>Misc</td>
+			<td>Dillo 0.8</td>
+			<td>Embedded devices</td>
+			<td class="center">-</td>
+			<td class="center">X</td>
+		</tr>
+		<tr class="gradeX">
+			<td>Misc</td>
+			<td>Links</td>
+			<td>Text only</td>
+			<td class="center">-</td>
+			<td class="center">X</td>
+		</tr>
+		<tr class="gradeX">
+			<td>Misc</td>
+			<td>Lynx</td>
+			<td>Text only</td>
+			<td class="center">-</td>
+			<td class="center">X</td>
+		</tr>
+		<tr class="gradeC">
+			<td>Misc</td>
+			<td>IE Mobile</td>
+			<td>Windows Mobile 6</td>
+			<td class="center">-</td>
+			<td class="center">C</td>
+		</tr>
+		<tr class="gradeC">
+			<td>Misc</td>
+			<td>PSP browser</td>
+			<td>PSP</td>
+			<td class="center">-</td>
+			<td class="center">C</td>
+		</tr>
+		<tr class="gradeU">
+			<td>Other browsers</td>
+			<td>All others</td>
+			<td>-</td>
+			<td class="center">-</td>
+			<td class="center">U</td>
+		</tr>
+	</tbody>
+</table>
+			
+			</div>
+		</div>
+	</body>
+</html>