Merge pull request #265 from TonyaSolaris/1_9

Updated dependencies to work with jQuery 2

.gitignore

@@ -1 +1,6 @@
 extras
+docs
+cdn
+media/js/jquery.dataTables.min.js
+.DS_Store
+Plugins

Readme.txt

@@ -1,4 +1,4 @@
-This DataTables plugin (v1.8.x) for jQuery was developed out of the desire to allow highly configurable access to HTML tables with advanced access features.
+This DataTables plugin (v1.9.x) for jQuery was developed out of the desire to allow highly configurable access to HTML tables with advanced access features.
 
 For detailed installation, usage and API instructions, please refer to the DataTables web-pages: http://www.datatables.net
 
@@ -6,6 +6,6 @@ Questions, feature requests and bug reports (etc) can all be asked on the DataTa
 
 The DataTables source can be found in the media/js/ directory of this archive.
 
-DataTables is released with dual licensing, using the GPL v2 (license-gpl2.txt) and an BSD style license (license-bsd.txt). Please see the corresponding license file for details of these licenses. You are free to use, modify and distribute this software, but all copyright information must remain.
+DataTables is released with dual licensing, using the GPL v2 (license-gpl2.txt) and an BSD style license (license-bsd.txt). You may select which of the two licenses you wish to use DataTables under. Please see the corresponding license file for details of these licenses. You are free to use, modify and distribute this software, but all copyright information must remain.
 
 If you discover any bugs in DataTables, have any suggestions for improvements or even if you just like using it, please free to get in touch with me: www.datatables.net/contact

component.json

@@ -0,0 +1,11 @@
+{
+	"name": "DataTables",
+	"version": "1.9.4",
+	"main": [
+		"./media/js/jquery.dataTables.js",
+		"./media/css/jquery.dataTables.css"
+	],
+	"dependencies": {
+		"jquery": ">=1.7.0"
+	}
+}

examples/advanced_init/column_render.html

@@ -16,8 +16,11 @@
 				$('#example').dataTable( {
 					"aoColumnDefs": [ 
 						{
-							"fnRender": function ( oObj ) {
-								return oObj.aData[0] +' '+ oObj.aData[3];
+							// `data` refers to the data for the cell (defined by `mData`, which
+							// defaults to the column being worked with, in this case is the first
+							// Using `row[0]` is equivalent.
+							"mRender": function ( data, type, row ) {
+								return data +' '+ row[3];
 							},
 							"aTargets": [ 0 ]
 						},
@@ -35,7 +38,8 @@
 			</div>
 
 			<h1>Preamble</h1>
-			<p>You may specify a function for each column to render the available data in a specific manner which will be called when the table is drawn. In this example I've appended the rendering engine version to the rendering engine name in the first column, and hidden the version column.</p>
+			<p>Each column has an optional rendering control called <a href="http://datatables.net/ref#mRender">mRender</a> which can be used to process the content of each cell before the data is used. <code>mRender</code> has a wide array of options available to it for rendering different types of data (sorting, filtering, display etc), but it can be used very simply to manipulate the content of a cell, as shown here.</p>
+			<p>This example shows the rendering engine version combined with the rendering engine name in the first column, hiding the version column. This technique can be useful for adding links, assigning colours based on content rules and any other form of text manipulation you require.</p>
 			
 			<h1>Live example</h1>
 			<div id="demo">
@@ -465,12 +469,15 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"aoColumnDefs": [ 
 			{
-				"fnRender": function ( oObj ) {
-					return oObj.aData[0] +' '+ oObj.aData[3];
+				// `data` refers to the data for the cell (defined by `mData`, which
+				// defaults to the column being worked with, in this case is the first
+				// Using `row[0]` is equivalent.
+				"mRender": function ( data, type, row ) {
+					return data +' '+ row[3];
 				},
 				"aTargets": [ 0 ]
 			},
@@ -479,6 +486,10 @@
 		]
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -493,6 +504,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -511,7 +523,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -525,6 +537,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -567,7 +582,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/advanced_init/complex_header.html

@@ -468,13 +468,18 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"aoColumnDefs": [
 			{ "bVisible": false, "aTargets": [2] }
 		]
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+	
 			
 			
 			<h1>Other examples</h1>
@@ -489,6 +494,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -507,7 +513,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -521,6 +527,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -563,7 +572,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/advanced_init/defaults.html

@@ -0,0 +1,612 @@
+<!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" />
+		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
+		
+		<title>DataTables example</title>
+		<style type="text/css" title="currentStyle">
+			@import "../../media/css/demo_page.css";
+			@import "../../media/css/demo_table.css";
+		</style>
+		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
+		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
+		<script type="text/javascript" charset="utf-8">
+			$(document).ready(function() {
+				$.extend( $.fn.dataTable.defaults, {
+					"bFilter": false,
+					"bSort": false
+				} );
+
+				$('#example').dataTable();
+			} );
+		</script>
+	</head>
+	<body id="dt_example">
+		<div id="container">
+			<div class="full_width big">
+				DataTables - setting defaults example
+			</div>
+			
+			<h1>Preamble</h1>
+			<p>When working with DataTables over multiple pages it is often useful to set the initialisation defaults to common values (for example you might want to set <i>sDom</i> to a common value so all tables get the same layout). This can be done using the <i>$.fn.dataTable.defaults</i> object. This object will take all the same parameters as the DataTables initialisation object, but in this case you are setting the default for all future initialisations of DataTables.</p>
+
+			<p>This example shows the filtering and sorting features of DataTables being disabled by default, which is reflected in the table when it is initialised, as can be seen below.</p>
+			
+			<h1>Live example</h1>
+			<div id="demo">
+<table cellpadding="0" cellspacing="0" border="0" class="display" 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>
+	<tfoot>
+		<tr>
+			<th>Rendering engine</th>
+			<th>Browser</th>
+			<th>Platform(s)</th>
+			<th>Engine version</th>
+			<th>CSS grade</th>
+		</tr>
+	</tfoot>
+</table>
+			</div>
+			<div class="spacer"></div>
+			
+			
+			<h1>Initialisation code</h1>
+			<pre class="brush: js;">$(document).ready(function() {
+	$.extend( $.fn.dataTable.defaults, {
+		"bFilter": false,
+		"bSort": false
+	} );
+
+	$('#example').dataTable();
+} );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+			
+			
+			<h1>Other examples</h1>
+			<div class="demo_links">
+				<h2>Basic initialisation</h2>
+				<ul>
+					<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
+					<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
+					<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
+					<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
+					<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
+					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
+					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
+					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
+					<li><a href="../basic_init/state_save.html">State saving</a></li>
+					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
+					<li>Scrolling: <br>
+						<a href="../basic_init/scroll_x.html">Horizontal</a> / 
+						<a href="../basic_init/scroll_y.html">Vertical</a> / 
+						<a href="../basic_init/scroll_xy.html">Both</a> / 
+						<a href="../basic_init/scroll_y_theme.html">Themed</a> / 
+						<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
+					</li>
+					<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
+					<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
+				</ul>
+				
+				<h2>Advanced initialisation</h2>
+				<ul>
+					<li>Events: <br>
+						<a href="../advanced_init/events_live.html">Live events</a> / 
+						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
+					</li>
+					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
+					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
+					<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
+					<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
+					<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
+					<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
+					<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
+					<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
+					<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
+					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
+					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
+					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
+				</ul>
+				
+				<h2>API</h2>
+				<ul>
+					<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
+					<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
+					<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
+					<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
+					<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
+					<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
+					<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
+					<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
+					<li><a href="../api/form.html">Submit form with elements in table</a></li>
+					<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
+					<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
+					<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
+					<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
+					<li><a href="../api/regex.html">Regular expression filtering</a></li>
+				</ul>
+			</div>
+			
+			<div class="demo_links">
+				<h2>Data sources</h2>
+				<ul>
+					<li><a href="../data_sources/dom.html">DOM</a></li>
+					<li><a href="../data_sources/js_array.html">Javascript array</a></li>
+					<li><a href="../data_sources/ajax.html">Ajax source</a></li>
+					<li><a href="../data_sources/server_side.html">Server side processing</a></li>
+				</ul>
+				
+				<h2>Server-side processing</h2>
+				<ul>
+					<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
+					<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
+					<li><a href="../server_side/post.html">Use HTTP POST</a></li>
+					<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
+					<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
+					<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
+					<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
+					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
+					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
+					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
+					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
+				</ul>
+				
+				<h2>Ajax data source</h2>
+				<ul>
+					<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
+					<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
+					<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
+					<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
+					<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
+					<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
+					<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
+				</ul>
+				
+				<h2>Plug-ins</h2>
+				<ul>
+					<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
+					<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
+					<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
+					<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
+					<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
+					<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
+					<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
+				</ul>
+			</div>
+			
+			
+			<div id="footer" class="clear" style="text-align:center;">
+				<p>
+					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
+				</p>
+				
+				<span style="font-size:10px;">
+					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
+					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
+				</span>
+			</div>
+		</div>
+	</body>
+</html>

examples/advanced_init/dom_multiple_elements.html

@@ -467,11 +467,15 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"sDom": '&lt;"top"iflp&lt;"clear"&gt;&gt;rt&lt;"bottom"iflp&lt;"clear"&gt;&gt;'
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -486,6 +490,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -504,7 +509,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -518,6 +523,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -560,7 +568,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/advanced_init/dom_toolbar.html

@@ -471,12 +471,16 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"sDom": '&lt;"toolbar"&gt;frtip'
 	} );
 	$("div.toolbar").html('<b>Custom tool bar! Text/images etc.</b>');
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -491,6 +495,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -509,7 +514,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -523,6 +528,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -565,7 +573,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/advanced_init/dt_events.html

@@ -0,0 +1,622 @@
+<!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" />
+		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
+		
+		<title>DataTables example</title>
+		<style type="text/css" title="currentStyle">
+			@import "../../media/css/demo_page.css";
+			@import "../../media/css/demo_table.css";
+		</style>
+		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
+		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
+		<script type="text/javascript" charset="utf-8">
+			function eventFired( type ) {
+				var n = document.getElementById('demo_info');
+				n.innerHTML += '<div>'+type+' event - '+new Date().getTime()+'</div>';
+				n.scrollTop = n.scrollHeight;		
+			}
+
+			$(document).ready(function() {
+				$('#example')
+					.bind('sort',   function () { eventFired( 'Sort' ); })
+					.bind('filter', function () { eventFired( 'Filter' ); })
+					.bind('page',   function () { eventFired( 'Page' ); })
+					.dataTable();
+			} );
+		</script>
+	</head>
+	<body id="dt_example">
+		<div id="container">
+			<div class="full_width big">
+				DataTables | events example
+			</div>
+			
+			<h1>Preamble</h1>
+			<p>DataTables can fire a number of custom events which you can bind to, allowing your code to perform custom actions when the events occured. This example shows the use of the <i>sort</i>, <i>filter</i> and <i>page</i> events and will add a nitofication that the event fired to an element on the page to show that they have indeed fired.</p>
+			
+			<h1>Live example</h1>
+			<div id="demo_info"></div>
+
+			<div id="demo">
+<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
+	<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>
+	<tfoot>
+		<tr>
+			<th>Rendering engine</th>
+			<th>Browser</th>
+			<th>Platform(s)</th>
+			<th>Engine version</th>
+			<th>CSS grade</th>
+		</tr>
+	</tfoot>
+</table>
+			</div>
+			<div class="spacer"></div>
+			
+			
+			<h1>Initialisation code</h1>
+			<pre class="brush: js;">function eventFired( type ) {
+	var n = document.getElementById('demo_info');
+	n.innerHTML += '&lt:div&gt:'+type+' event - '+new Date().getTime()+'&lt:/div&gt:';
+	n.scrollTop = n.scrollHeight;		
+}
+
+$(document).ready(function() {
+	$('#example')
+		.bind('sort',   function () { eventFired( 'Sort' ); })
+		.bind('filter', function () { eventFired( 'Filter' ); })
+		.bind('page',   function () { eventFired( 'Page' ); })
+		.dataTable();
+} );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+			
+			
+			<h1>Other examples</h1>
+			<div class="demo_links">
+				<h2>Basic initialisation</h2>
+				<ul>
+					<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
+					<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
+					<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
+					<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
+					<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
+					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
+					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
+					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
+					<li><a href="../basic_init/state_save.html">State saving</a></li>
+					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
+					<li>Scrolling: <br>
+						<a href="../basic_init/scroll_x.html">Horizontal</a> / 
+						<a href="../basic_init/scroll_y.html">Vertical</a> / 
+						<a href="../basic_init/scroll_xy.html">Both</a> / 
+						<a href="../basic_init/scroll_y_theme.html">Themed</a> / 
+						<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
+					</li>
+					<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
+					<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
+				</ul>
+				
+				<h2>Advanced initialisation</h2>
+				<ul>
+					<li>Events: <br>
+						<a href="../advanced_init/events_live.html">Live events</a> / 
+						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
+					</li>
+					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
+					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
+					<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
+					<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
+					<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
+					<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
+					<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
+					<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
+					<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
+					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
+					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
+					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
+				</ul>
+				
+				<h2>API</h2>
+				<ul>
+					<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
+					<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
+					<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
+					<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
+					<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
+					<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
+					<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
+					<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
+					<li><a href="../api/form.html">Submit form with elements in table</a></li>
+					<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
+					<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
+					<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
+					<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
+					<li><a href="../api/regex.html">Regular expression filtering</a></li>
+				</ul>
+			</div>
+			
+			<div class="demo_links">
+				<h2>Data sources</h2>
+				<ul>
+					<li><a href="../data_sources/dom.html">DOM</a></li>
+					<li><a href="../data_sources/js_array.html">Javascript array</a></li>
+					<li><a href="../data_sources/ajax.html">Ajax source</a></li>
+					<li><a href="../data_sources/server_side.html">Server side processing</a></li>
+				</ul>
+				
+				<h2>Server-side processing</h2>
+				<ul>
+					<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
+					<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
+					<li><a href="../server_side/post.html">Use HTTP POST</a></li>
+					<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
+					<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
+					<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
+					<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
+					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
+					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
+					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
+					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
+				</ul>
+				
+				<h2>Ajax data source</h2>
+				<ul>
+					<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
+					<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
+					<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
+					<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
+					<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
+					<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
+					<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
+				</ul>
+				
+				<h2>Plug-ins</h2>
+				<ul>
+					<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
+					<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
+					<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
+					<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
+					<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
+					<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
+					<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
+				</ul>
+			</div>
+			
+			
+			<div id="footer" class="clear" style="text-align:center;">
+				<p>
+					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
+				</p>
+				
+				<span style="font-size:10px;">
+					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
+					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
+				</span>
+			</div>
+		</div>
+	</body>
+</html>

examples/advanced_init/events_live.html

@@ -482,7 +482,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	/* Init DataTables */
 	$('#example').dataTable();
 	
@@ -505,6 +505,10 @@
 		alert( sTitle )
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -519,6 +523,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -537,7 +542,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -551,6 +556,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -593,7 +601,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/advanced_init/events_post_init.html

@@ -42,7 +42,7 @@
 				var oTable = $('#example').dataTable();
 				
 				/* Apply the tooltips */
-				$( oTable.fnGetNodes() ).tooltip( {
+				oTable.$('tr').tooltip( {
 					"delay": 0,
 					"track": true,
 					"fade": 250
@@ -57,7 +57,8 @@
 			</div>
 			
 			<h1>Preamble</h1>
-			<p>Events which are assigned to the table elements are retained by DataTables such that they will still work as you would expect, even after changing the sort order etc. (no need to reapply the event handlers). You can do this at any time, although if you apply the handlers after the table has been initialised there is an extra set. Rather then queriing the DOM to get all rows (since they aren't there) you need to use the <b>fnGetNodes()</b> API function. This is shown in this example.</p>
+			<p>Events which are assigned to the table elements are retained by DataTables such that they will still work as you would expect, even after changing the sort order etc. (no need to reapply the event handlers). You can do this at any time, although if you apply the handlers after the table has been initialised there is an extra set. Rather then querying the DOM to get all rows (since they aren't there) you can use the '$' API method that DataTables provides which does a jQuery selector on the whole table and returns a jQuery object.</p>
+			<p>This example shows the tooltip plug-in being applied to the table after initialisation.</p>
 			
 			<h1>Live example</h1>
 			<div id="demo">
@@ -493,7 +494,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	/*
 	 * First step is to create title attributes for the rows in the table
 	 * This isn't needed if the required 'title' attribute is already set in the HTML in the
@@ -521,12 +522,16 @@
 	var oTable = $('#example').dataTable();
 	
 	/* Apply the tooltips */
-	$( oTable.fnGetNodes() ).tooltip( {
+	oTable.$('tr').tooltip( {
 		"delay": 0,
 		"track": true,
 		"fade": 250
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -541,6 +546,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -559,7 +565,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -573,6 +579,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -615,7 +624,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/advanced_init/events_pre_init.html

@@ -493,7 +493,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	/*
 	 * First step is to create title attributes for the rows in the table
 	 * This isn't needed if the required 'title' attribute is already set in the HTML in the
@@ -527,6 +527,10 @@
 	/* Init DataTables */
 	$('#example').dataTable();
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -541,6 +545,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -559,7 +564,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -573,6 +578,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -615,7 +623,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/advanced_init/footer_callback.html

@@ -484,7 +484,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"fnFooterCallback": function ( nRow, aaData, iStart, iEnd, aiDisplay ) {
 			/*
@@ -511,6 +511,10 @@
 		}
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -525,6 +529,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -543,7 +548,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -557,6 +562,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -599,7 +607,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/advanced_init/highlight.html

@@ -459,10 +459,13 @@
 			
 			<h1>Initialisation code</h1>
 			<p>Javascript:</p>
-			<pre>
-$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable();
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 
 			<p>CSS (note that for this example the selector ".ex_highlight" is used to limit the CSS here to just this example.</p>
 			<pre>.ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
@@ -519,6 +522,7 @@ $(document).ready(function() {
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -537,7 +541,7 @@ $(document).ready(function() {
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -551,6 +555,9 @@ $(document).ready(function() {
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -593,7 +600,6 @@ $(document).ready(function() {
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/advanced_init/html_sort.html

@@ -55,8 +55,13 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
-	$('#example').dataTable();</pre>
+			<pre class="brush: js;">$(document).ready(function() {
+	$('#example').dataTable();
+} );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -71,6 +76,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -89,7 +95,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -103,6 +109,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -145,7 +154,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/advanced_init/language_file.html

@@ -462,13 +462,17 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"oLanguage": {
 			"sUrl": "media/language/de_DE.txt"
 		}
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -483,6 +487,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -501,7 +506,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -515,6 +520,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -557,7 +565,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/advanced_init/length_menu.html

@@ -460,11 +460,15 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -479,6 +483,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -497,7 +502,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -511,6 +516,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -553,7 +561,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/advanced_init/localstorage.html

@@ -0,0 +1,612 @@
+<!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" />
+		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
+		
+		<title>DataTables example</title>
+		<style type="text/css" title="currentStyle">
+			@import "../../media/css/demo_page.css";
+			@import "../../media/css/demo_table.css";
+		</style>
+		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
+		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
+		<script type="text/javascript" charset="utf-8">
+			$(document).ready(function() {
+				$('#example').dataTable( {
+					"bStateSave": true,
+					"fnStateSave": function (oSettings, oData) {
+						localStorage.setItem( 'DataTables_'+window.location.pathname, JSON.stringify(oData) );
+					},
+					"fnStateLoad": function (oSettings) {
+						var data = localStorage.getItem('DataTables_'+window.location.pathname);
+						return JSON.parse(data);
+					}
+				} );
+			} );
+		</script>
+	</head>
+	<body id="dt_example">
+		<div id="container">
+			<div class="full_width big">
+				DataTables - state saving with localStorage
+			</div>
+			
+			<h1>Preamble</h1>
+			<p>The state saving storage method that is built into DataTables makes use of cookies for compatibility with all browsers. However, cookies have a number of disadvantagies such as requiring increased HTTP bandwidth and a 4K limit. The W3C Web Storage specification defines <a href="https://developer.mozilla.org/en/DOM/Storage">localStorage</a> as a local storage method which we can use in DataTables to store state without the inherent issues in using cookies.</p>
+			<p>This example shows the use of <i>fnStateSave</i> and <i>fnStateLoad</i> to very simply store the table state in localStorage and then load it back again when needed.</p>
+			
+			<h1>Live example</h1>
+			<div id="demo">
+<table cellpadding="0" cellspacing="0" border="0" class="display" 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="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="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="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="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="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="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>
+	<tfoot>
+		<tr>
+			<th>Rendering engine</th>
+			<th>Browser</th>
+			<th>Platform(s)</th>
+			<th>Engine version</th>
+			<th>CSS grade</th>
+		</tr>
+	</tfoot>
+</table>
+			</div>
+			<div class="spacer"></div>
+			
+			
+			<h1>Initialisation code</h1>
+			<pre class="brush: js;">$(document).ready(function() {
+	$('#example').dataTable( {
+		"bStateSave": true
+	} );
+} );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+			
+			
+			<h1>Other examples</h1>
+			<div class="demo_links">
+				<h2>Basic initialisation</h2>
+				<ul>
+					<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
+					<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
+					<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
+					<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
+					<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
+					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
+					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
+					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
+					<li><a href="../basic_init/state_save.html">State saving</a></li>
+					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
+					<li>Scrolling: <br>
+						<a href="../basic_init/scroll_x.html">Horizontal</a> / 
+						<a href="../basic_init/scroll_y.html">Vertical</a> / 
+						<a href="../basic_init/scroll_xy.html">Both</a> / 
+						<a href="../basic_init/scroll_y_theme.html">Themed</a> / 
+						<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
+					</li>
+					<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
+					<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
+				</ul>
+				
+				<h2>Advanced initialisation</h2>
+				<ul>
+					<li>Events: <br>
+						<a href="../advanced_init/events_live.html">Live events</a> / 
+						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
+					</li>
+					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
+					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
+					<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
+					<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
+					<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
+					<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
+					<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
+					<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
+					<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
+					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
+					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
+					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
+				</ul>
+				
+				<h2>API</h2>
+				<ul>
+					<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
+					<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
+					<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
+					<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
+					<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
+					<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
+					<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
+					<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
+					<li><a href="../api/form.html">Submit form with elements in table</a></li>
+					<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
+					<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
+					<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
+					<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
+					<li><a href="../api/regex.html">Regular expression filtering</a></li>
+				</ul>
+			</div>
+			
+			<div class="demo_links">
+				<h2>Data sources</h2>
+				<ul>
+					<li><a href="../data_sources/dom.html">DOM</a></li>
+					<li><a href="../data_sources/js_array.html">Javascript array</a></li>
+					<li><a href="../data_sources/ajax.html">Ajax source</a></li>
+					<li><a href="../data_sources/server_side.html">Server side processing</a></li>
+				</ul>
+				
+				<h2>Server-side processing</h2>
+				<ul>
+					<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
+					<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
+					<li><a href="../server_side/post.html">Use HTTP POST</a></li>
+					<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
+					<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
+					<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
+					<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
+					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
+					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
+					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
+					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
+				</ul>
+				
+				<h2>Ajax data source</h2>
+				<ul>
+					<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
+					<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
+					<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
+					<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
+					<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
+					<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
+					<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
+				</ul>
+				
+				<h2>Plug-ins</h2>
+				<ul>
+					<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
+					<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
+					<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
+					<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
+					<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
+					<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
+					<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
+				</ul>
+			</div>
+			
+			
+			<div id="footer" class="clear" style="text-align:center;">
+				<p>
+					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
+				</p>
+				
+				<span style="font-size:10px;">
+					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
+					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
+				</span>
+			</div>
+		</div>
+	</body>
+</html>

examples/advanced_init/row_callback.html

@@ -20,7 +20,6 @@
 						{
 							$('td:eq(4)', nRow).html( '<b>A</b>' );
 						}
-						return nRow;
 					},
 					"aoColumnDefs": [ {
 							"sClass": "center",
@@ -37,7 +36,7 @@
 			</div>
 			
 			<h1>Preamble</h1>
-			<p>The following example shows how a callback function can be used to format a particular row at draw time. For each row that is generated for display, the <b>fnRowCallback()</b> function is called. It is passed the row node which can then be modified and returned. In this case a trivial example of making the 'grade' column bold if the grade is 'A' is shown (note that this could also be performed using the <b>fnRender()</b> function, but this is just for example).</p>
+			<p>The following example shows how a callback function can be used to format a particular row at draw time. For each row that is generated for display, the <b>fnRowCallback()</b> function is called. It is passed the row node which can then be modified. In this case a trivial example of making the 'grade' column bold if the grade is 'A' is shown (note that this could also be performed using <a href="http://datatables.net/ref#mData">mData</a> as a function, but this is just for example of fnRowCallback!).</p>
 			
 			<h1>Live example</h1>
 			<div id="demo">
@@ -471,7 +470,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-				<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
 			/* Append the grade to the default row class name */
@@ -479,7 +478,6 @@
 			{
 				$('td:eq(4)', nRow).html( '&lt;b&gt;A&lt;/b&gt;' );
 			}
-			return nRow;
 		},
 		"aoColumnDefs": [ {
 				"sClass": "center",
@@ -487,6 +485,10 @@
 		} ]
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -501,6 +503,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -519,7 +522,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -533,6 +536,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -575,7 +581,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/advanced_init/row_grouping.html

@@ -486,7 +486,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	oTable = $('#example').dataTable({
 		"fnDrawCallback": function ( oSettings ) {
 			if ( oSettings.aiDisplay.length == 0 )
@@ -522,6 +522,10 @@
 		"sDom": 'lfr&lt;"giveHeight"t&gt;ip'
 	});
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -536,6 +540,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -554,7 +559,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -568,6 +573,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -610,7 +618,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/advanced_init/sorting_control.html

@@ -475,7 +475,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"aoColumns": [
 			null,
@@ -486,6 +486,10 @@
 		]
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -500,6 +504,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -518,7 +523,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -532,6 +537,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -574,7 +582,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/ajax/ajax.html

@@ -59,12 +59,20 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"bProcessing": true,
 		"sAjaxSource": "sources/arrays.txt"
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+
+			<h1>Server response</h1>
+			<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
+			<pre id="latest_xhr" class="brush: js;"></pre>
 			
 			
 			<h1>Other examples</h1>
@@ -79,6 +87,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -97,7 +106,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -111,6 +120,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -153,7 +165,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/ajax/custom_data_property.html

@@ -60,13 +60,21 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"bProcessing": true,
 		"sAjaxSource": "sources/custom_prop.txt",
 		"sAjaxDataProp": "demo"
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+
+			<h1>Server response</h1>
+			<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
+			<pre id="latest_xhr" class="brush: js;"></pre>
 			
 			
 			<h1>Other examples</h1>
@@ -81,6 +89,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -99,7 +108,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -113,6 +122,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -155,7 +167,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/ajax/deep.html

@@ -17,11 +17,11 @@
 					"bProcessing": true,
 					"sAjaxSource": "sources/deep.txt",
 					"aoColumns": [
-						{ "mDataProp": "engine" },
-						{ "mDataProp": "browser" },
-						{ "mDataProp": "platform.inner" },
-						{ "mDataProp": "platform.details.0" },
-						{ "mDataProp": "platform.details.1" }
+						{ "mData": "engine" },
+						{ "mData": "browser" },
+						{ "mData": "platform.inner" },
+						{ "mData": "platform.details.0" },
+						{ "mData": "platform.details.1" }
 					]
 				} );
 			} );
@@ -66,19 +66,27 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	var oTable = $('#example').dataTable( {
 		"bProcessing": true,
 		"sAjaxSource": "sources/deep.txt",
 		"aoColumns": [
-			{ "mDataProp": "engine" },
-			{ "mDataProp": "browser" },
-			{ "mDataProp": "platform.inner" },
-			{ "mDataProp": "platform.details.0" },
-			{ "mDataProp": "platform.details.1" }
+			{ "mData": "engine" },
+			{ "mData": "browser" },
+			{ "mData": "platform.inner" },
+			{ "mData": "platform.details.0" },
+			{ "mData": "platform.details.1" }
 		]
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+
+			<h1>Server response</h1>
+			<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
+			<pre id="latest_xhr" class="brush: js;"></pre>
 			
 			
 			<h1>Other examples</h1>
@@ -93,6 +101,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -111,7 +120,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -125,6 +134,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -167,7 +179,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/ajax/defer_render.html

@@ -60,13 +60,21 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"bProcessing": true,
 		"sAjaxSource": "sources/arrays.txt",
 		"bDeferRender": true
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+
+			<h1>Server response</h1>
+			<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
+			<pre id="latest_xhr" class="brush: js;"></pre>
 			
 			
 			<h1>Other examples</h1>
@@ -81,6 +89,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -99,7 +108,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -113,6 +122,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -155,7 +167,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/ajax/null_data_source.html

@@ -22,7 +22,7 @@
 						null,
 						null,
 						null,
-						{ "mDataProp": null }
+						{ "mData": null }
 					]
 				} );
 			} );
@@ -35,7 +35,7 @@
 			</div>
 			
 			<h1>Preamble</h1>
-			<p>In some tables it can be useful to not need to specify any data source for a column, as it's content is automatically generated (for example using fnRender). This is fairly common with add, edit and delete columns for a CRUD interface. You can now use the <b>mDataProp</b> set to <i>null</i> to specify that the column has no data source. DataTables will render this column as empty.</p>
+			<p>In some tables it can be useful to not need to specify any data source for a column, as it's content is automatically generated (for example using fnRender). This is fairly common with add, edit and delete columns for a CRUD interface. You can now use the <b>mData</b> set to <i>null</i> to specify that the column has no data source. DataTables will render this column as empty.</p>
 			
 			<h1>Live example</h1>
 			<div id="dynamic">
@@ -57,7 +57,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	var oTable = $('#example').dataTable( {
 		"bProcessing": true,
 		"sAjaxSource": "sources/arrays.txt",
@@ -67,10 +67,18 @@
 			null,
 			null,
 			null,
-			{ "mDataProp": null }
+			{ "mData": null }
 		]
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+
+			<h1>Server response</h1>
+			<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
+			<pre id="latest_xhr" class="brush: js;"></pre>
 			
 			
 			<h1>Other examples</h1>
@@ -85,6 +93,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -103,7 +112,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -117,6 +126,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -159,7 +171,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/ajax/objects.html

@@ -17,11 +17,11 @@
 					"bProcessing": true,
 					"sAjaxSource": "sources/objects.txt",
 					"aoColumns": [
-						{ "mDataProp": "engine" },
-						{ "mDataProp": "browser" },
-						{ "mDataProp": "platform" },
-						{ "mDataProp": "version" },
-						{ "mDataProp": "grade" }
+						{ "mData": "engine" },
+						{ "mData": "browser" },
+						{ "mData": "platform" },
+						{ "mData": "version" },
+						{ "mData": "grade" }
 					]
 				} );
 			} );
@@ -66,19 +66,27 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	var oTable = $('#example').dataTable( {
 		"bProcessing": true,
 		"sAjaxSource": "sources/objects.txt",
 		"aoColumns": [
-			{ "mDataProp": "engine" },
-			{ "mDataProp": "browser" },
-			{ "mDataProp": "platform" },
-			{ "mDataProp": "version" },
-			{ "mDataProp": "grade" }
+			{ "mData": "engine" },
+			{ "mData": "browser" },
+			{ "mData": "platform" },
+			{ "mData": "version" },
+			{ "mData": "grade" }
 		]
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+
+			<h1>Server response</h1>
+			<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
+			<pre id="latest_xhr" class="brush: js;"></pre>
 			
 			
 			<h1>Other examples</h1>
@@ -93,6 +101,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -111,7 +120,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -125,6 +134,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -167,7 +179,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/ajax/objects_subarrays.html

@@ -17,11 +17,11 @@
 					"bProcessing": true,
 					"sAjaxSource": "sources/objects_subarrays.txt",
 					"aoColumns": [
-						{ "mDataProp": "engine" },
-						{ "mDataProp": "browser" },
-						{ "mDataProp": "platform" },
-						{ "mDataProp": "details.0" },
-						{ "mDataProp": "details.1" }
+						{ "mData": "engine" },
+						{ "mData": "browser" },
+						{ "mData": "platform" },
+						{ "mData": "details.0" },
+						{ "mData": "details.1" }
 					]
 				} );
 			} );
@@ -66,19 +66,27 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	var oTable = $('#example').dataTable( {
 		"bProcessing": true,
 		"sAjaxSource": "sources/objects_subarrays.txt",
 		"aoColumns": [
-			{ "mDataProp": "engine" },
-			{ "mDataProp": "browser" },
-			{ "mDataProp": "platform" },
-			{ "mDataProp": "details.0" },
-			{ "mDataProp": "details.1" }
+			{ "mData": "engine" },
+			{ "mData": "browser" },
+			{ "mData": "platform" },
+			{ "mData": "details.0" },
+			{ "mData": "details.1" }
 		]
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+
+			<h1>Server response</h1>
+			<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
+			<pre id="latest_xhr" class="brush: js;"></pre>
 			
 			
 			<h1>Other examples</h1>
@@ -93,6 +101,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -111,7 +120,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -125,6 +134,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -167,7 +179,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/api/add_row.html

@@ -66,7 +66,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>/* Global var for counter */
+			<pre class="brush: js;">/* Global var for counter */
 var giCount = 1;
 
 $(document).ready(function() {
@@ -82,6 +82,10 @@ function fnClickAddRow() {
 	
 	giCount++;
 }</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -96,6 +100,7 @@ function fnClickAddRow() {
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -114,7 +119,7 @@ function fnClickAddRow() {
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -128,6 +133,9 @@ function fnClickAddRow() {
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -170,7 +178,6 @@ function fnClickAddRow() {
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/api/api_in_init.html

@@ -15,10 +15,8 @@
 			$(document).ready(function() {
 				$('#example').dataTable( {
 					"fnInitComplete": function () {
-						var 
-							that = this,
-							nTrs = this.fnGetNodes();
-						$('td', nTrs).click( function () {
+						var that = this;
+						this.$('td').click( function () {
 							that.fnFilter( this.innerHTML );
 						} );
 					}
@@ -33,8 +31,8 @@
 			</div>
 			
 			<h1>Preamble</h1>
-			<p>There are times when you may wish to call API functions inside the DataTables callback functions (for example fnInitComplete, fnRowCallback etc). The complicating issue with this is that the object hasn't fully initialised, so you can't assign the result to something like oTable and then use oTable in the callback. However, this is catered for by the execution scope of the callback function. Here 'this' is the DataTables object that is created for the table.</p>
-			<p>In this example you will be able to see that this.fnGetNodes() is used, and also the value of this stored in the variable 'that' so it can be used inside the jQuery click function, where the execution scope has been changed to the td element!). The action here is to apply the filter with the value of what is in each cell.</p>
+			<p>There are times when you may wish to call API functions inside the DataTables callback functions (for example fnInitComplete, fnRowCallback etc). The complicating issue with this is that the object hasn't fully initialised, so you can't assign the result to something like oTable and then use oTable in the callback. However, this is catered for by the execution scope of the callback function. Here <i>this</i> is the DataTables object that is created for the table.</p>
+			<p>In this example you will be able to see that <i>this.$()</i> is used to get all nodes in the table's body and then act on them (in this case added a click event). Note also the value of <i>this</i> stored in the variable <i>that</i> so it can be used inside the jQuery click function, where the execution scope has been changed to the td element!). The action here is to apply the filter with the value of what is in each cell.</p>
 			
 			<h1>Live example</h1>
 			<div id="demo">
@@ -468,18 +466,20 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"fnInitComplete": function () {
-			var 
-				that = this,
-				nTrs = this.fnGetNodes();
-			$('td', nTrs).click( function () {
+			var that = this;
+			this.$('td').click( function () {
 				that.fnFilter( this.innerHTML );
 			} );
 		}
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -494,6 +494,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -512,7 +513,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -526,6 +527,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -568,7 +572,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/api/counter_column.html

@@ -15,13 +15,14 @@
 			$(document).ready(function() {
 				$('#example').dataTable( {
 					"fnDrawCallback": function ( oSettings ) {
+						var that = this;
+
 						/* Need to redo the counters if filtered or sorted */
 						if ( oSettings.bSorted || oSettings.bFiltered )
 						{
-							for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ )
-							{
-								$('td:eq(0)', oSettings.aoData[ oSettings.aiDisplay[i] ].nTr ).html( i+1 );
-							}
+							this.$('td:first-child', {"filter":"applied"}).each( function (i) {
+								that.fnUpdate( i+1, this.parentNode, 0, false, false );
+							} );
 						}
 					},
 					"aoColumnDefs": [
@@ -533,16 +534,15 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"fnDrawCallback": function ( oSettings ) {
 			/* Need to redo the counters if filtered or sorted */
 			if ( oSettings.bSorted || oSettings.bFiltered )
 			{
-				for ( var i=0, iLen=oSettings.aiDisplay.length ; i&lt;iLen ; i++ )
-				{
-					$('td:eq(0)', oSettings.aoData[ oSettings.aiDisplay[i] ].nTr ).html( i+1 );
-				}
+				this.$('td:first-child', {"filter":"applied"}).each( function (i) {
+					that.fnUpdate( i+1, this.parentNode, 0, false, false );
+				} );
 			}
 		},
 		"aoColumnDefs": [
@@ -551,6 +551,10 @@
 		"aaSorting": [[ 1, 'asc' ]]
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -565,6 +569,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -583,7 +588,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -597,6 +602,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -639,7 +647,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/api/editable.html

@@ -18,7 +18,7 @@
 				var oTable = $('#example').dataTable();
 				
 				/* Apply the jEditable handlers to the table */
-				$('td', oTable.fnGetNodes()).editable( '../examples_support/editable_ajax.php', {
+				oTable.$('td').editable( '../examples_support/editable_ajax.php', {
 					"callback": function( sValue, y ) {
 						var aPos = oTable.fnGetPosition( this );
 						oTable.fnUpdate( sValue, aPos[0], aPos[1] );
@@ -29,7 +29,8 @@
 							"column": oTable.fnGetPosition( this )[2]
 						};
 					},
-					"height": "14px"
+					"height": "14px",
+					"width": "100%"
 				} );
 			} );
 		</script>
@@ -44,6 +45,7 @@
 			<p>Using DataTables in-combination with the excellent <a href="http://www.appelsiini.net/projects/jeditable">jEditable</a> plugin for jQuery allows you to produce a table which can have individual cells edited. The table can then be updated such that filtering, sorting etc. will all work as expected. This is showing in the demo below.</p>
 			<p>The example shows how a table element can be edited (you could limit to a particular column if you wish using the selector), posted to the server (for saving in a database or whatever) and then placed back into the DataTable. The server's processing in this example simply appends the string '(server updated)' to indicate that something has happened on the server.</p>
 			<p>Note also that this example makes use of the information in the 'ID' attribute of the TR element. This is useful in order to tell the server what row is being updated - this can readily be expended to include column information as required. Further to this, it is worth noting that to use this type of example with DataTables' server-side processing option, you must use <a href="http://datatables.net/usage/callbacks#fnDrawCallback">fnDrawCallback</a> to apply the event listeners on each draw.</p>
+			<p>Finally, if you are interested in a full <a href="http://en.wikipedia.org/wiki/Create,_read,_update_and_delete">CRUD</a> implementation for DataTables, check out the <a href="http://editor.datatables.net">Editor plug-in for DataTables</a>, which provides a flexible and easy to use create, edit and delete environment for DataTables controlled tables with full server interaction.</p>
 			
 			<h1>Live example</h1>
 			<div id="demo">
@@ -479,12 +481,12 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	/* Init DataTables */
 	var oTable = $('#example').dataTable();
 	
 	/* Apply the jEditable handlers to the table */
-	$('td', oTable.fnGetNodes()).editable( '../examples_support/editable_ajax.php', {
+	oTable.$('td').editable( '../examples_support/editable_ajax.php', {
 		"callback": function( sValue, y ) {
 			var aPos = oTable.fnGetPosition( this );
 			oTable.fnUpdate( sValue, aPos[0], aPos[1] );
@@ -495,9 +497,14 @@
 				"column": oTable.fnGetPosition( this )[2]
 			};
 		},
-		"height": "14px"
+		"height": "14px",
+		"width": "100%"
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -512,6 +519,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -530,7 +538,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -544,6 +552,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -586,7 +597,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/api/form.html

@@ -16,7 +16,7 @@
 			
 			$(document).ready(function() {
 				$('#form').submit( function() {
-					var sData = $('input', oTable.fnGetNodes()).serialize();
+					var sData = oTable.$('input').serialize();
 					alert( "The following data would have been submitted to the server: \n\n"+sData );
 					return false;
 				} );
@@ -530,17 +530,21 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>var oTable;
+			<pre class="brush: js;">var oTable;
 
 $(document).ready(function() {
 	$('#form').submit( function() {
-		var sData = $('input', oTable.fnGetNodes()).serialize();
+		var sData = oTable.$('input').serialize();
 		alert( "The following data would have been submitted to the server: \n\n"+sData );
 		return false;
 	} );
 	
 	oTable = $('#example').dataTable();
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -555,6 +559,7 @@ $(document).ready(function() {
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -573,7 +578,7 @@ $(document).ready(function() {
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -587,6 +592,9 @@ $(document).ready(function() {
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -629,7 +637,6 @@ $(document).ready(function() {
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/api/highlight.html

@@ -17,12 +17,11 @@
 					"bSortClasses": false
 				} );
 				
-				$('td', oTable.fnGetNodes()).hover( function() {
-					var iCol = $('td').index(this) % 5;
-					var nTrs = oTable.fnGetNodes();
-					$('td:nth-child('+(iCol+1)+')', nTrs).addClass( 'highlighted' );
+				oTable.$('td').hover( function() {
+					var iCol = $('td', this.parentNode).index(this) % 5;
+					$('td:nth-child('+(iCol+1)+')', oTable.$('tr')).addClass( 'highlighted' );
 				}, function() {
-					$('td.highlighted', oTable.fnGetNodes()).removeClass('highlighted');
+					oTable.$('td.highlighted').removeClass('highlighted');
 				} );
 			} );
 		</script>
@@ -468,19 +467,22 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	var oTable = $('#example').dataTable( {
 		"bSortClasses": false
 	} );
 	
-	$('td', oTable.fnGetNodes()).hover( function() {
-		var iCol = $('td').index(this) % 5;
-		var nTrs = oTable.fnGetNodes();
-		$('td:nth-child('+(iCol+1)+')', nTrs).addClass( 'highlighted' );
+	oTable.$('td').hover( function() {
+		var iCol = $('td', this.parentNode).index(this) % 5;
+		$('td:nth-child('+(iCol+1)+')', oTable.$('tr')).addClass( 'highlighted' );
 	}, function() {
-		$('td.highlighted', oTable.fnGetNodes()).removeClass('highlighted');
+		oTable.$('td.highlighted').removeClass('highlighted');
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -495,6 +497,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -513,7 +516,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -527,6 +530,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -569,7 +575,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/api/multi_filter.html

@@ -496,7 +496,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>var asInitVals = new Array();
+			<pre class="brush: js;">var asInitVals = new Array();
 
 $(document).ready(function() {
 	var oTable = $('#example').dataTable( {
@@ -536,6 +536,10 @@ $(document).ready(function() {
 		}
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			<p>Note that in the above code, the support functions are provided to ensure that the end user knows what data is being filtered upon. <b>fnFilter()</b> is the function of primary import here.</p>
 			
 			
@@ -551,6 +555,7 @@ $(document).ready(function() {
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -569,7 +574,7 @@ $(document).ready(function() {
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -583,6 +588,9 @@ $(document).ready(function() {
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -625,7 +633,6 @@ $(document).ready(function() {
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/api/multi_filter_select.html

@@ -28,13 +28,13 @@
 				// check that we have a column id
 				if ( typeof iColumn == "undefined" ) return new Array();
 				
-				// by default we only wany unique data
+				// by default we only want unique data
 				if ( typeof bUnique == "undefined" ) bUnique = true;
 				
 				// by default we do want to only look at filtered data
 				if ( typeof bFiltered == "undefined" ) bFiltered = true;
 				
-				// by default we do not wany to include empty values
+				// by default we do not want to include empty values
 				if ( typeof bIgnoreEmpty == "undefined" ) bIgnoreEmpty = true;
 				
 				// list of rows which we're going to loop through
@@ -538,7 +538,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>(function($) {
+			<pre class="brush: js;">(function($) {
 /*
  * Function: fnGetColumnData
  * Purpose:  Return an array of table values from a particular column.
@@ -554,13 +554,13 @@ $.fn.dataTableExt.oApi.fnGetColumnData = function ( oSettings, iColumn, bUnique,
 	// check that we have a column id
 	if ( typeof iColumn == "undefined" ) return new Array();
 	
-	// by default we only wany unique data
+	// by default we only want unique data
 	if ( typeof bUnique == "undefined" ) bUnique = true;
 	
 	// by default we do want to only look at filtered data
 	if ( typeof bFiltered == "undefined" ) bFiltered = true;
 	
-	// by default we do not wany to include empty values
+	// by default we do not want to include empty values
 	if ( typeof bIgnoreEmpty == "undefined" ) bIgnoreEmpty = true;
 	
 	// list of rows which we're going to loop through
@@ -620,6 +620,10 @@ $(document).ready(function() {
 		} );
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -634,6 +638,7 @@ $(document).ready(function() {
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -652,7 +657,7 @@ $(document).ready(function() {
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -666,6 +671,9 @@ $(document).ready(function() {
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -708,7 +716,6 @@ $(document).ready(function() {
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/api/regex.html

@@ -554,7 +554,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>function fnFilterGlobal ()
+			<pre class="brush: js;">function fnFilterGlobal ()
 {
 	$('#example').dataTable().fnFilter( 
 		$("#global_filter").val(),
@@ -587,6 +587,10 @@ $(document).ready(function() {
 	
 	// ... etc for the other four columns
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -601,6 +605,7 @@ $(document).ready(function() {
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -619,7 +624,7 @@ $(document).ready(function() {
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -633,6 +638,9 @@ $(document).ready(function() {
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -675,7 +683,6 @@ $(document).ready(function() {
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/api/row_details.html

@@ -57,8 +57,8 @@
 				 * rather it is done here
 				 */
 				$('#example tbody td img').live('click', function () {
-					var nTr = this.parentNode.parentNode;
-					if ( this.src.match('details_close') )
+					var nTr = $(this).parents('tr')[0];
+					if ( oTable.fnIsOpen(nTr) )
 					{
 						/* This row is already open - close it */
 						this.src = "../examples_support/details_open.png";
@@ -506,7 +506,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>/* Formating function for row details */
+			<pre class="brush: js;">/* Formating function for row details */
 function fnFormatDetails ( oTable, nTr )
 {
 	var aData = oTable.fnGetData( nTr );
@@ -551,8 +551,8 @@ $(document).ready(function() {
 	 * rather it is done here
 	 */
 	$('#example tbody td img').live('click', function () {
-		var nTr = this.parentNode.parentNode;
-		if ( this.src.match('details_close') )
+		var nTr = $(this).parents('tr')[0];
+		if ( oTable.fnIsOpen(nTr) )
 		{
 			/* This row is already open - close it */
 			this.src = "../examples_support/details_open.png";
@@ -566,6 +566,10 @@ $(document).ready(function() {
 		}
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -580,6 +584,7 @@ $(document).ready(function() {
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -598,7 +603,7 @@ $(document).ready(function() {
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -612,6 +617,9 @@ $(document).ready(function() {
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -654,7 +662,6 @@ $(document).ready(function() {
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/api/select_row.html

@@ -13,12 +13,9 @@
 		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 		<script type="text/javascript" charset="utf-8">
 			$(document).ready(function() {
-				/* Add a click handler to the rows - this could be used as a callback */
+				/* Add/remove class to a row when clicked on */
 				$('#example tr').click( function() {
-					if ( $(this).hasClass('row_selected') )
-						$(this).removeClass('row_selected');
-					else
-						$(this).addClass('row_selected');
+					$(this).toggleClass('row_selected');
 				} );
 				
 				/* Init the table */
@@ -31,17 +28,7 @@
 			 */
 			function fnGetSelected( oTableLocal )
 			{
-				var aReturn = new Array();
-				var aTrs = oTableLocal.fnGetNodes();
-				
-				for ( var i=0 ; i<aTrs.length ; i++ )
-				{
-					if ( $(aTrs[i]).hasClass('row_selected') )
-					{
-						aReturn.push( aTrs[i] );
-					}
-				}
-				return aReturn;
+				return oTableLocal.$('tr.row_selected');
 			}
 		</script>
 	</head>
@@ -52,7 +39,7 @@
 			</div>
 			
 			<h1>Preamble</h1>
-			<p>It can be quite useful at times to provide the user with the option to select rows in a DataTable. This can be done using the API functions that DataTables provides. The example below uses the <b>fnRowCallback()</b> function to add a 'click' listener to each row, which will highlight the required row when selected. The indexes of the selected rows are then provided through the custom function <b>fnGetSelected()</b> for later processing.</p>
+			<p>It can be quite useful at times to provide the user with the option to select rows in a DataTable. This can be done by simply using a click event to add/remove a class on the table rows. The the selected rows are then provided through the custom function <b>fnGetSelected()</b> for later processing.</p>
 			
 			<h1>Live example</h1>
 			<div id="demo">
@@ -486,13 +473,10 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
-	/* Add a click handler to the rows - this could be used as a callback */
+			<pre class="brush: js;">$(document).ready(function() {
+	/* Add/remove class to a row when clicked on */
 	$('#example tr').click( function() {
-		if ( $(this).hasClass('row_selected') )
-			$(this).removeClass('row_selected');
-		else
-			$(this).addClass('row_selected');
+		$(this).toggleClass('row_selected');
 	} );
 	
 	/* Init the table */
@@ -505,18 +489,12 @@
  */
 function fnGetSelected( oTableLocal )
 {
-	var aReturn = new Array();
-	var aTrs = oTableLocal.fnGetNodes();
-	
-	for ( var i=0 ; i&lt;aTrs.length ; i++ )
-	{
-		if ( $(aTrs[i]).hasClass('row_selected') )
-		{
-			aReturn.push( aTrs[i] );
-		}
-	}
-	return aReturn;
+	return oTableLocal.$('tr.row_selected');
 }</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -531,6 +509,7 @@ function fnGetSelected( oTableLocal )
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -549,7 +528,7 @@ function fnGetSelected( oTableLocal )
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -563,6 +542,9 @@ function fnGetSelected( oTableLocal )
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -605,7 +587,6 @@ function fnGetSelected( oTableLocal )
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/api/select_single_row.html

@@ -13,21 +13,25 @@
 		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 		<script type="text/javascript" charset="utf-8">
 			var oTable;
-			var giRedraw = false;
 			
 			$(document).ready(function() {
 				/* Add a click handler to the rows - this could be used as a callback */
-				$("#example tbody").click(function(event) {
-					$(oTable.fnSettings().aoData).each(function (){
-						$(this.nTr).removeClass('row_selected');
-					});
-					$(event.target.parentNode).addClass('row_selected');
+				$("#example tbody tr").click( function( e ) {
+					if ( $(this).hasClass('row_selected') ) {
+						$(this).removeClass('row_selected');
+					}
+					else {
+						oTable.$('tr.row_selected').removeClass('row_selected');
+						$(this).addClass('row_selected');
+					}
 				});
 				
 				/* Add a click handler for the delete row */
 				$('#delete').click( function() {
 					var anSelected = fnGetSelected( oTable );
-					oTable.fnDeleteRow( anSelected[0] );
+					if ( anSelected.length !== 0 ) {
+						oTable.fnDeleteRow( anSelected[0] );
+					}
 				} );
 				
 				/* Init the table */
@@ -38,17 +42,7 @@
 			/* Get the rows which are currently selected */
 			function fnGetSelected( oTableLocal )
 			{
-				var aReturn = new Array();
-				var aTrs = oTableLocal.fnGetNodes();
-				
-				for ( var i=0 ; i<aTrs.length ; i++ )
-				{
-					if ( $(aTrs[i]).hasClass('row_selected') )
-					{
-						aReturn.push( aTrs[i] );
-					}
-				}
-				return aReturn;
+				return oTableLocal.$('tr.row_selected');
 			}
 		</script>
 	</head>
@@ -59,7 +53,7 @@
 			</div>
 			
 			<h1>Preamble</h1>
-			<p>It can be quite useful at times to provide the user with the option to select rows in a DataTable. This can be done using the API functions that DataTables provides. The example below uses the <b>fnRowCallback()</b> function to add a 'click' listener to each row, which will highlight the required row when selected. The indexes of the selected rows are then provided through the custom function <b>fnGetSelected()</b> for later processing.</p>
+			<p>It can be quite useful at times to provide the user with the option to select rows in a DataTable. In this example we use standard jQuery 'click' events to add a class to table rows to indicate that they have been selected. Note that we use <i>oTable.$()</i> when working with rows in the table to ensure that all rows are considered, regardless of paging and filtering.</p>
 			
 			<h1>Live example</h1>
 			<p><a href="javascript:void(0)" id="delete">Delete selected row</a></p>
@@ -494,22 +488,26 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>var oTable;
-var giRedraw = false;
+			<pre class="brush: js;">var oTable;
 
 $(document).ready(function() {
 	/* Add a click handler to the rows - this could be used as a callback */
-	$("#example tbody").click(function(event) {
-		$(oTable.fnSettings().aoData).each(function (){
-			$(this.nTr).removeClass('row_selected');
-		});
-		$(event.target.parentNode).addClass('row_selected');
+	$("#example tbody tr").click( function( e ) {
+		if ( $(this).hasClass('row_selected') ) {
+			$(this).removeClass('row_selected');
+		}
+		else {
+			oTable.$('tr.row_selected').removeClass('row_selected');
+			$(this).addClass('row_selected');
+		}
 	});
 	
 	/* Add a click handler for the delete row */
 	$('#delete').click( function() {
 		var anSelected = fnGetSelected( oTable );
-		oTable.fnDeleteRow( anSelected[0] );
+		if ( anSelected.length !== 0 ) {
+			oTable.fnDeleteRow( anSelected[0] );
+		}
 	} );
 	
 	/* Init the table */
@@ -520,18 +518,12 @@ $(document).ready(function() {
 /* Get the rows which are currently selected */
 function fnGetSelected( oTableLocal )
 {
-	var aReturn = new Array();
-	var aTrs = oTableLocal.fnGetNodes();
-	
-	for ( var i=0 ; i&lt;aTrs.length ; i++ )
-	{
-		if ( $(aTrs[i]).hasClass('row_selected') )
-		{
-			aReturn.push( aTrs[i] );
-		}
-	}
-	return aReturn;
+	return oTableLocal.$('tr.row_selected');
 }</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -546,6 +538,7 @@ function fnGetSelected( oTableLocal )
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -564,7 +557,7 @@ function fnGetSelected( oTableLocal )
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -578,6 +571,9 @@ function fnGetSelected( oTableLocal )
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -620,7 +616,6 @@ function fnGetSelected( oTableLocal )
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/api/show_hide.html

@@ -476,7 +476,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"sScrollY": "200px",
 		"bPaginate": false
@@ -491,6 +491,10 @@ function fnShowHide( iCol )
 	var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
 	oTable.fnSetColumnVis( iCol, bVis ? false : true );
 }</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -505,6 +509,7 @@ function fnShowHide( iCol )
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -523,7 +528,7 @@ function fnShowHide( iCol )
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -537,6 +542,9 @@ function fnShowHide( iCol )
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -579,7 +587,6 @@ function fnShowHide( iCol )
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/api/tabs_and_scrolling.html

@@ -18,9 +18,9 @@
 			$(document).ready(function() {
 				$("#tabs").tabs( {
 					"show": function(event, ui) {
-						var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
-						if ( oTable.length > 0 ) {
-							oTable.fnAdjustColumnSizing();
+						var table = $.fn.dataTable.fnTables(true);
+						if ( table.length > 0 ) {
+							$(table).dataTable().fnAdjustColumnSizing();
 						}
 					}
 				} );
@@ -297,12 +297,12 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$("#tabs").tabs( {
 		"show": function(event, ui) {
-			var oTable = $('div.dataTables_scrollBody&gt;table.display', ui.panel).dataTable();
-			if ( oTable.length &gt; 0 ) {
-				oTable.fnAdjustColumnSizing();
+			var table = $.fn.dataTable.fnTables(true);
+			if ( table.length &gt; 0 ) {
+				$(table).dataTable().fnAdjustColumnSizing();
 			}
 		}
 	} );
@@ -317,6 +317,10 @@
 		]
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -331,6 +335,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -349,7 +354,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -363,6 +368,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -405,7 +413,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/basic_init/alt_pagination.html

@@ -407,6 +407,48 @@
 			<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>
 	<tfoot>
 		<tr>
@@ -423,11 +465,15 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"sPaginationType": "full_numbers"
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -442,6 +488,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -460,7 +507,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -474,6 +521,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -516,7 +566,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/basic_init/base.html

@@ -0,0 +1,596 @@
+<!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" />
+		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
+		
+		<title>DataTables example</title>
+		<style type="text/css" title="currentStyle">
+			@import "../../media/css/demo_page.css";
+			@import "../../media/css/jquery.dataTables.css";
+		</style>
+		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
+		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
+		<script type="text/javascript" charset="utf-8">
+			$(document).ready(function() {
+				$('#example').dataTable();
+			} );
+		</script>
+	</head>
+	<body id="dt_example">
+		<div id="container">
+			<div class="full_width big">
+				DataTables base example (CDN CSS)
+			</div>
+			
+			<h1>Preamble</h1>
+			<p>DataTables has most features enabled by default, so all you need to do to use it with one of your own tables is to call the construction function (as shown below).</p>
+			
+			<h1>Live example</h1>
+			<div id="demo">
+<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
+	<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>
+	<tfoot>
+		<tr>
+			<th>Rendering engine</th>
+			<th>Browser</th>
+			<th>Platform(s)</th>
+			<th>Engine version</th>
+			<th>CSS grade</th>
+		</tr>
+	</tfoot>
+</table>
+			</div>
+			<div class="spacer"></div>
+			
+			
+			<h1>Initialisation code</h1>
+			<pre class="brush: js;">$(document).ready(function() {
+	$('#example').dataTable();
+} );</pre>
+			
+			
+			<h1>Other examples</h1>
+			<div class="demo_links">
+				<h2>Basic initialisation</h2>
+				<ul>
+					<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
+					<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
+					<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
+					<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
+					<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
+					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
+					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
+					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
+					<li><a href="../basic_init/state_save.html">State saving</a></li>
+					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
+					<li>Scrolling: <br>
+						<a href="../basic_init/scroll_x.html">Horizontal</a> / 
+						<a href="../basic_init/scroll_y.html">Vertical</a> / 
+						<a href="../basic_init/scroll_xy.html">Both</a> / 
+						<a href="../basic_init/scroll_y_theme.html">Themed</a> / 
+						<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
+					</li>
+					<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
+					<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
+				</ul>
+				
+				<h2>Advanced initialisation</h2>
+				<ul>
+					<li>Events: <br>
+						<a href="../advanced_init/events_live.html">Live events</a> / 
+						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
+					</li>
+					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
+					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
+					<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
+					<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
+					<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
+					<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
+					<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
+					<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
+					<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
+					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
+					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
+					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
+				</ul>
+				
+				<h2>API</h2>
+				<ul>
+					<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
+					<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
+					<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
+					<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
+					<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
+					<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
+					<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
+					<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
+					<li><a href="../api/form.html">Submit form with elements in table</a></li>
+					<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
+					<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
+					<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
+					<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
+					<li><a href="../api/regex.html">Regular expression filtering</a></li>
+				</ul>
+			</div>
+			
+			<div class="demo_links">
+				<h2>Data sources</h2>
+				<ul>
+					<li><a href="../data_sources/dom.html">DOM</a></li>
+					<li><a href="../data_sources/js_array.html">Javascript array</a></li>
+					<li><a href="../data_sources/ajax.html">Ajax source</a></li>
+					<li><a href="../data_sources/server_side.html">Server side processing</a></li>
+				</ul>
+				
+				<h2>Server-side processing</h2>
+				<ul>
+					<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
+					<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
+					<li><a href="../server_side/post.html">Use HTTP POST</a></li>
+					<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
+					<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
+					<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
+					<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
+					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
+					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
+					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
+					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
+				</ul>
+				
+				<h2>Ajax data source</h2>
+				<ul>
+					<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
+					<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
+					<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
+					<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
+					<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
+					<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
+					<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
+				</ul>
+				
+				<h2>Plug-ins</h2>
+				<ul>
+					<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
+					<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
+					<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
+					<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
+					<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
+					<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
+					<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
+				</ul>
+			</div>
+			
+			
+			<div id="footer" class="clear" style="text-align:center;">
+				<p>
+					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
+				</p>
+				
+				<span style="font-size:10px;">
+					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
+					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
+				</span>
+			</div>
+		</div>
+	</body>
+</html>

examples/basic_init/base_themeroller.html

@@ -0,0 +1,592 @@
+<!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" />
+		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
+		
+		<title>DataTables example</title>
+		<style type="text/css" title="currentStyle">
+			@import "../../media/css/demo_page.css";
+			@import "../../media/css/jquery.dataTables_themeroller.css";
+			@import "../examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css";
+		</style>
+		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
+		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
+		<script type="text/javascript" charset="utf-8">
+			$(document).ready(function() {
+				$('#example').dataTable( {
+					"bJQueryUI": true,
+					"sPaginationType": "full_numbers"
+				} );
+			} );
+		</script>
+	</head>
+	<body id="dt_example">
+		<div id="container">
+			<div class="full_width big">
+				DataTables base example (CDN CSS)
+			</div>
+			
+			<h1>Preamble</h1>
+			<p>DataTables has most features enabled by default, so all you need to do to use it with one of your own tables is to call the construction function (as shown below).</p>
+			
+			<h1>Live example</h1>
+			<div id="demo">
+<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
+	<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>
+	<tfoot>
+</table>
+			</div>
+			<div class="spacer"></div>
+			
+			
+			<h1>Initialisation code</h1>
+			<pre class="brush: js;">$(document).ready(function() {
+	$('#example').dataTable();
+} );</pre>
+			
+			
+			<h1>Other examples</h1>
+			<div class="demo_links">
+				<h2>Basic initialisation</h2>
+				<ul>
+					<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
+					<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
+					<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
+					<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
+					<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
+					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
+					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
+					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
+					<li><a href="../basic_init/state_save.html">State saving</a></li>
+					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
+					<li>Scrolling: <br>
+						<a href="../basic_init/scroll_x.html">Horizontal</a> / 
+						<a href="../basic_init/scroll_y.html">Vertical</a> / 
+						<a href="../basic_init/scroll_xy.html">Both</a> / 
+						<a href="../basic_init/scroll_y_theme.html">Themed</a> / 
+						<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
+					</li>
+					<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
+					<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
+				</ul>
+				
+				<h2>Advanced initialisation</h2>
+				<ul>
+					<li>Events: <br>
+						<a href="../advanced_init/events_live.html">Live events</a> / 
+						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
+					</li>
+					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
+					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
+					<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
+					<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
+					<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
+					<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
+					<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
+					<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
+					<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
+					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
+					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
+					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
+				</ul>
+				
+				<h2>API</h2>
+				<ul>
+					<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
+					<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
+					<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
+					<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
+					<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
+					<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
+					<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
+					<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
+					<li><a href="../api/form.html">Submit form with elements in table</a></li>
+					<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
+					<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
+					<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
+					<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
+					<li><a href="../api/regex.html">Regular expression filtering</a></li>
+				</ul>
+			</div>
+			
+			<div class="demo_links">
+				<h2>Data sources</h2>
+				<ul>
+					<li><a href="../data_sources/dom.html">DOM</a></li>
+					<li><a href="../data_sources/js_array.html">Javascript array</a></li>
+					<li><a href="../data_sources/ajax.html">Ajax source</a></li>
+					<li><a href="../data_sources/server_side.html">Server side processing</a></li>
+				</ul>
+				
+				<h2>Server-side processing</h2>
+				<ul>
+					<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
+					<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
+					<li><a href="../server_side/post.html">Use HTTP POST</a></li>
+					<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
+					<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
+					<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
+					<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
+					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
+					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
+					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
+					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
+				</ul>
+				
+				<h2>Ajax data source</h2>
+				<ul>
+					<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
+					<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
+					<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
+					<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
+					<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
+					<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
+					<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
+				</ul>
+				
+				<h2>Plug-ins</h2>
+				<ul>
+					<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
+					<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
+					<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
+					<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
+					<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
+					<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
+					<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
+				</ul>
+			</div>
+			
+			
+			<div id="footer" class="clear" style="text-align:center;">
+				<p>
+					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
+				</p>
+				
+				<span style="font-size:10px;">
+					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
+					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
+				</span>
+			</div>
+		</div>
+	</body>
+</html>

examples/basic_init/complex_header.html

@@ -464,9 +464,13 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable();
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -481,6 +485,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -499,7 +504,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -513,6 +518,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -555,7 +563,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/basic_init/dom.html

@@ -475,11 +475,15 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"sDom": '&lt;"top"i&gt;rt&lt;"bottom"flp&gt;&lt;"clear"&gt;'
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -494,6 +498,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -512,7 +517,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -526,6 +531,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -568,7 +576,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/basic_init/filter_only.html

@@ -460,15 +460,20 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"bPaginate": false,
 		"bLengthChange": false,
 		"bFilter": true,
 		"bSort": false,
 		"bInfo": false,
-		"bAutoWidth": false } );
+		"bAutoWidth": false
+	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -483,6 +488,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -501,7 +507,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -515,6 +521,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -557,7 +566,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/basic_init/flexible_width.html

@@ -0,0 +1,602 @@
+<!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" />
+		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
+		
+		<title>DataTables example</title>
+		<style type="text/css" title="currentStyle">
+			@import "../../media/css/demo_page.css";
+			@import "../../media/css/demo_table.css";
+		</style>
+		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
+		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
+		<script type="text/javascript" charset="utf-8">
+			$(document).ready(function() {
+				$('#example').dataTable();
+			} );
+		</script>
+	</head>
+	<body id="dt_example">
+		<div id="container" style="width:80%">
+			<div class="full_width big">
+				DataTables - flexible width example
+			</div>
+			
+			<h1>Preamble</h1>
+			<p>Often you may want to have your table resize dynamically with the page. Typically this is done by assigning width:100% in your CSS, but this presents a problem for Javascript since it can be very hard to get that relative size, rather than the absolute pixels. As such, if you apply the <i>width</i> attribute to the HTML table
+			tag, this will be used as the width for the table (overruling any CSS styles).</p>
+			<p>This example shows a table width <i>width="100%"</i> and the container is also flexible width, so as the window is resized, the table will also resize dynamically.</p>
+			
+			<h1>Live example</h1>
+			<div id="demo">
+<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
+	<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>
+	<tfoot>
+		<tr>
+			<th>Rendering engine</th>
+			<th>Browser</th>
+			<th>Platform(s)</th>
+			<th>Engine version</th>
+			<th>CSS grade</th>
+		</tr>
+	</tfoot>
+</table>
+			</div>
+			<div class="spacer"></div>
+			
+			
+			<h1>Initialisation code</h1>
+			<pre class="brush: js;">$(document).ready(function() {
+	$('#example').dataTable();
+} );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+			
+			
+			<h1>Other examples</h1>
+			<div class="demo_links">
+				<h2>Basic initialisation</h2>
+				<ul>
+					<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
+					<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
+					<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
+					<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
+					<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
+					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
+					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
+					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
+					<li><a href="../basic_init/state_save.html">State saving</a></li>
+					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
+					<li>Scrolling: <br>
+						<a href="../basic_init/scroll_x.html">Horizontal</a> / 
+						<a href="../basic_init/scroll_y.html">Vertical</a> / 
+						<a href="../basic_init/scroll_xy.html">Both</a> / 
+						<a href="../basic_init/scroll_y_theme.html">Themed</a> / 
+						<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
+					</li>
+					<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
+					<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
+				</ul>
+				
+				<h2>Advanced initialisation</h2>
+				<ul>
+					<li>Events: <br>
+						<a href="../advanced_init/events_live.html">Live events</a> / 
+						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
+					</li>
+					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
+					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
+					<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
+					<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
+					<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
+					<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
+					<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
+					<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
+					<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
+					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
+					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
+					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
+				</ul>
+				
+				<h2>API</h2>
+				<ul>
+					<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
+					<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
+					<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
+					<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
+					<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
+					<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
+					<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
+					<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
+					<li><a href="../api/form.html">Submit form with elements in table</a></li>
+					<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
+					<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
+					<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
+					<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
+					<li><a href="../api/regex.html">Regular expression filtering</a></li>
+				</ul>
+			</div>
+			
+			<div class="demo_links">
+				<h2>Data sources</h2>
+				<ul>
+					<li><a href="../data_sources/dom.html">DOM</a></li>
+					<li><a href="../data_sources/js_array.html">Javascript array</a></li>
+					<li><a href="../data_sources/ajax.html">Ajax source</a></li>
+					<li><a href="../data_sources/server_side.html">Server side processing</a></li>
+				</ul>
+				
+				<h2>Server-side processing</h2>
+				<ul>
+					<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
+					<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
+					<li><a href="../server_side/post.html">Use HTTP POST</a></li>
+					<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
+					<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
+					<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
+					<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
+					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
+					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
+					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
+					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
+				</ul>
+				
+				<h2>Ajax data source</h2>
+				<ul>
+					<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
+					<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
+					<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
+					<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
+					<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
+					<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
+					<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
+				</ul>
+				
+				<h2>Plug-ins</h2>
+				<ul>
+					<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
+					<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
+					<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
+					<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
+					<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
+					<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
+					<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
+				</ul>
+			</div>
+			
+			
+			<div id="footer" class="clear" style="text-align:center;">
+				<p>
+					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
+				</p>
+				
+				<span style="font-size:10px;">
+					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
+					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
+				</span>
+			</div>
+		</div>
+	</body>
+</html>

examples/basic_init/hidden_columns.html

@@ -458,13 +458,17 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 				$('#example').dataTable( {
 					"aoColumnDefs": [ 
 						{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },
 						{ "bVisible": false, "aTargets": [ 3 ] }
 					] } );
 			} );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -479,6 +483,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -497,7 +502,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -511,6 +516,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -553,7 +561,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/basic_init/language.html

@@ -462,7 +462,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 $('#example').dataTable( {
 		"oLanguage": {
 			"sLengthMenu": "Display _MENU_ records per page",
@@ -473,6 +473,10 @@ $('#example').dataTable( {
 		}
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -487,6 +491,7 @@ $('#example').dataTable( {
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -505,7 +510,7 @@ $('#example').dataTable( {
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -519,6 +524,9 @@ $('#example').dataTable( {
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -561,7 +569,6 @@ $('#example').dataTable( {
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/basic_init/multi_col_sort.html

@@ -474,7 +474,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>/* Define two custom functions (asc and desc) for string sorting */
+			<pre class="brush: js;">/* Define two custom functions (asc and desc) for string sorting */
 jQuery.fn.dataTableExt.oSort['string-case-asc']  = function(x,y) {
 	return ((x &lt; y) ? -1 : ((x &gt; y) ?  1 : 0));
 };
@@ -496,6 +496,10 @@ $(document).ready(function() {
 		]
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -510,6 +514,7 @@ $(document).ready(function() {
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -528,7 +533,7 @@ $(document).ready(function() {
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -542,6 +547,9 @@ $(document).ready(function() {
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -584,7 +592,6 @@ $(document).ready(function() {
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/basic_init/multiple_tables.html

@@ -274,9 +274,13 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('.dataTable').dataTable();
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -291,6 +295,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -309,7 +314,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -323,6 +328,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -365,7 +373,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/basic_init/scroll_x.html

@@ -463,13 +463,18 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"sScrollX": "100%",
 		"sScrollXInner": "110%",
 		"bScrollCollapse": true
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+	
 			
 			
 			<h1>Other examples</h1>
@@ -484,6 +489,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -502,7 +508,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -516,6 +522,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -558,7 +567,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/basic_init/scroll_xy.html

@@ -454,13 +454,17 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"sScrollY": 200,
 		"sScrollX": "100%",
 		"sScrollXInner": "110%"
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -475,6 +479,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -493,7 +498,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -507,6 +512,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -549,7 +557,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/basic_init/scroll_y.html

@@ -16,7 +16,8 @@
 			$(document).ready(function() {
 				$('#example').dataTable( {
 					"sScrollY": "200px",
-					"bPaginate": false
+					"bPaginate": false,
+					"bScrollCollapse": true
 				} );
 			} );
 		</script>
@@ -462,12 +463,17 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"sScrollY": "200px",
-		"bPaginate": false
+		"bPaginate": false,
+		"bScrollCollapse": true
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -482,6 +488,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -500,7 +507,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -514,6 +521,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -556,7 +566,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/basic_init/scroll_y_infinite.html

@@ -464,13 +464,17 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"bScrollInfinite": true,
 		"bScrollCollapse": true,
 		"sScrollY": "200px"
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -485,6 +489,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -503,7 +508,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -517,6 +522,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -559,7 +567,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/basic_init/scroll_y_theme.html

@@ -463,13 +463,17 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"sScrollY": 200,
 		"bJQueryUI": true,
 		"sPaginationType": "full_numbers"
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -484,6 +488,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -502,7 +507,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -516,6 +521,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -558,7 +566,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/basic_init/state_save.html

@@ -460,11 +460,15 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"bStateSave": true
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -479,6 +483,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -497,7 +502,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -511,6 +516,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -553,7 +561,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/basic_init/table_sorting.html

@@ -460,11 +460,15 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"aaSorting": [[ 4, "desc" ]]
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -479,6 +483,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -497,7 +502,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -511,6 +516,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -553,7 +561,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/basic_init/themes.html

@@ -453,12 +453,16 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	oTable = $('#example').dataTable({
 		"bJQueryUI": true,
 		"sPaginationType": "full_numbers"
 	});
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -473,6 +477,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -491,7 +496,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -505,6 +510,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -547,7 +555,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/basic_init/zero_config.html

@@ -28,7 +28,7 @@
 			
 			<h1>Live example</h1>
 			<div id="demo">
-<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
+<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
 	<thead>
 		<tr>
 			<th>Rendering engine</th>
@@ -458,9 +458,13 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable();
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -475,6 +479,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -493,7 +498,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -507,6 +512,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -549,7 +557,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/data_sources/ajax.html

@@ -27,7 +27,7 @@
 			</div>
 			
 			<h1>Preamble</h1>
-			<p>Although DataTables is built from the principle of progressive enhancement, it is often useful to be able to construct a table from an AJAX source. This can be done in one of two ways - either using the <b>aData</b> initialisation parameter which takes an array of data, or using the <b>sAjaxSource</b> initialisation parameter which will have DataTables go to that source with an XHR call and load data from there. This example shows the latter method in action. DataTables expects an object with an array called "aaData" with the data source.</p>
+			<p>Although DataTables is built from the principle of progressive enhancement, it is often useful to be able to construct a table from an AJAX source. This can be done in one of two ways - either using the <b>aaData</b> initialisation parameter which takes an array of data, or using the <b>sAjaxSource</b> initialisation parameter which will have DataTables go to that source with an XHR call and load data from there. This example shows the latter method in action. DataTables expects an object with an array called "aaData" with the data source.</p>
 			
 			<h1>Live example</h1>
 			<div id="dynamic">
@@ -59,12 +59,20 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"bProcessing": true,
 		"sAjaxSource": '../ajax/sources/arrays.txt'
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+
+			<h1>Server response</h1>
+			<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
+			<pre id="latest_xhr" class="brush: js;"></pre>
 			
 			
 			<h1>Other examples</h1>
@@ -79,6 +87,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -97,7 +106,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -111,6 +120,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -153,7 +165,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/data_sources/dom.html

@@ -458,9 +458,13 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable();
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -475,6 +479,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -493,7 +498,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -507,6 +512,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -549,7 +557,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/data_sources/js_array.html

@@ -82,17 +82,7 @@
 						{ "sTitle": "Browser" },
 						{ "sTitle": "Platform" },
 						{ "sTitle": "Version", "sClass": "center" },
-						{
-							"sTitle": "Grade",
-							"sClass": "center",
-							"fnRender": function(obj) {
-								var sReturn = obj.aData[ obj.iDataColumn ];
-								if ( sReturn == "A" ) {
-									sReturn = "<b>A</b>";
-								}
-								return sReturn;
-							}
-						}
+						{ "sTitle": "Grade", "sClass": "center" }
 					]
 				} );	
 			} );
@@ -113,7 +103,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#demo').html( '&lt;table cellpadding="0" cellspacing="0" border="0" class="display" id="example"&gt;&lt;/table&gt;' );
 	$('#example').dataTable( {
 		"aaData": [
@@ -136,20 +126,14 @@
 			{ "sTitle": "Browser" },
 			{ "sTitle": "Platform" },
 			{ "sTitle": "Version", "sClass": "center" },
-			{
-				"sTitle": "Grade",
-				"sClass": "center",
-				"fnRender": function(obj) {
-					var sReturn = obj.aData[ obj.iDataColumn ];
-					if ( sReturn == "A" ) {
-						sReturn = "&lt;b&gt;A&lt;/b&gt;";
-					}
-					return sReturn;
-				}
-			}
+			{ "sTitle": "Grade", "sClass": "center" }
 		]
 	} );	
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -164,6 +148,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -182,7 +167,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -196,6 +181,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -238,7 +226,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/data_sources/server_side.html

@@ -10,7 +10,6 @@
 			@import "../../media/css/demo_table.css";
 		</style>
 		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
 		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 		<script type="text/javascript" charset="utf-8">
 			$(document).ready(function() {
@@ -64,23 +63,25 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"bProcessing": true,
 		"bServerSide": true,
 		"sAjaxSource": "../server_side/scripts/server_processing.php"
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+
+			<h1>Server response</h1>
+			<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
+			<pre id="latest_xhr" class="brush: js;"></pre>
 			
 			
 			<h1>Server side (PHP) code</h1>
 			<pre>&lt;?php
-	/*
-	 * Script:    DataTables server-side script for PHP and MySQL
-	 * Copyright: 2010 - Allan Jardine
-	 * License:   GPL v2 or BSD (3-point)
-	 */
-	
 	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 	 * Easy set variables
 	 */
@@ -102,6 +103,9 @@
 	$gaSql['db']         = "";
 	$gaSql['server']     = "localhost";
 	
+	/* REMOVE THIS LINE (it just includes my SQL connection user/pass) */
+	include( $_SERVER['DOCUMENT_ROOT']."/datatables/mysql.php" );
+	
 	
 	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 	 * If you just want to use the basic configuration for DataTables with PHP server-side, there is
@@ -132,6 +136,7 @@
 	/*
 	 * Ordering
 	 */
+	$sOrder = "";
 	if ( isset( $_GET['iSortCol_0'] ) )
 	{
 		$sOrder = "ORDER BY  ";
@@ -139,8 +144,8 @@
 		{
 			if ( $_GET[ 'bSortable_'.intval($_GET['iSortCol_'.$i]) ] == "true" )
 			{
-				$sOrder .= $aColumns[ intval( $_GET['iSortCol_'.$i] ) ]."
-				 	".mysql_real_escape_string( $_GET['sSortDir_'.$i] ) .", ";
+				$sOrder .= "`".$aColumns[ intval( $_GET['iSortCol_'.$i] ) ]."` ".
+				 	mysql_real_escape_string( $_GET['sSortDir_'.$i] ) .", ";
 			}
 		}
 		
@@ -159,12 +164,12 @@
 	 * on very large tables, and MySQL's regex functionality is very limited
 	 */
 	$sWhere = "";
-	if ( $_GET['sSearch'] != "" )
+	if ( isset($_GET['sSearch']) &amp;&amp; $_GET['sSearch'] != "" )
 	{
 		$sWhere = "WHERE (";
 		for ( $i=0 ; $i&lt;count($aColumns) ; $i++ )
 		{
-			$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
+			$sWhere .= "`".$aColumns[$i]."` LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
 		}
 		$sWhere = substr_replace( $sWhere, "", -3 );
 		$sWhere .= ')';
@@ -173,7 +178,7 @@
 	/* Individual column filtering */
 	for ( $i=0 ; $i&lt;count($aColumns) ; $i++ )
 	{
-		if ( $_GET['bSearchable_'.$i] == "true" &amp;&amp; $_GET['sSearch_'.$i] != '' )
+		if ( isset($_GET['bSearchable_'.$i]) &amp;&amp; $_GET['bSearchable_'.$i] == "true" &amp;&amp; $_GET['sSearch_'.$i] != '' )
 		{
 			if ( $sWhere == "" )
 			{
@@ -183,7 +188,7 @@
 			{
 				$sWhere .= " AND ";
 			}
-			$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string($_GET['sSearch_'.$i])."%' ";
+			$sWhere .= "`".$aColumns[$i]."` LIKE '%".mysql_real_escape_string($_GET['sSearch_'.$i])."%' ";
 		}
 	}
 	
@@ -193,12 +198,12 @@
 	 * Get data to display
 	 */
 	$sQuery = "
-		SELECT SQL_CALC_FOUND_ROWS ".str_replace(" , ", " ", implode(", ", $aColumns))."
+		SELECT SQL_CALC_FOUND_ROWS `".str_replace(" , ", " ", implode("`, `", $aColumns))."`
 		FROM   $sTable
 		$sWhere
 		$sOrder
 		$sLimit
-	";
+		";
 	$rResult = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
 	
 	/* Data set length after filtering */
@@ -211,7 +216,7 @@
 	
 	/* Total data set length */
 	$sQuery = "
-		SELECT COUNT(".$sIndexColumn.")
+		SELECT COUNT(`".$sIndexColumn."`)
 		FROM   $sTable
 	";
 	$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
@@ -264,6 +269,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -282,7 +288,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -296,6 +302,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -338,7 +347,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/examples_support/syntax/css/shCore.css

@@ -0,0 +1,377 @@
+/**
+ * SyntaxHighlighter
+ * http://alexgorbatchev.com/SyntaxHighlighter
+ *
+ * SyntaxHighlighter is donationware. If you are using it, please donate.
+ * http://alexgorbatchev.com/SyntaxHighlighter/donate.html
+ *
+ * @version
+ * 3.0.83 (July 02 2010)
+ * 
+ * @copyright
+ * Copyright (C) 2004-2010 Alex Gorbatchev.
+ *
+ * @license
+ * Dual licensed under the MIT and GPL licenses.
+ */
+.syntaxhighlighter a,
+.syntaxhighlighter div,
+.syntaxhighlighter code,
+.syntaxhighlighter table,
+.syntaxhighlighter table td,
+.syntaxhighlighter table tr,
+.syntaxhighlighter table tbody,
+.syntaxhighlighter table thead,
+.syntaxhighlighter table caption,
+.syntaxhighlighter textarea {
+  -moz-border-radius: 0 0 0 0 !important;
+  -webkit-border-radius: 0 0 0 0 !important;
+  background: none !important;
+  border: 0 !important;
+  bottom: auto !important;
+  float: none !important;
+  height: auto !important;
+  left: auto !important;
+  line-height: 1.1em !important;
+  margin: 0 !important;
+  outline: 0 !important;
+  overflow: visible !important;
+  padding: 0 !important;
+  position: static !important;
+  right: auto !important;
+  text-align: left !important;
+  top: auto !important;
+  vertical-align: baseline !important;
+  width: auto !important;
+  box-sizing: content-box !important;
+  font-family: "Consolas","Monaco","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
+  font-weight: normal !important;
+  font-style: normal !important;
+  font-size: 1em !important;
+  min-height: inherit !important;
+  min-height: auto !important;
+}
+
+.syntaxhighlighter {
+  width: 100% !important;
+  margin: 1em 0 1em 0 !important;
+  position: relative !important;
+  overflow: auto !important;
+  font-size: 1em !important;
+}
+.syntaxhighlighter.source {
+  overflow: hidden !important;
+}
+.syntaxhighlighter .bold {
+  font-weight: bold !important;
+}
+.syntaxhighlighter .italic {
+  font-style: italic !important;
+}
+.syntaxhighlighter .line {
+  white-space: pre !important;
+}
+.syntaxhighlighter table {
+  width: 100% !important;
+}
+.syntaxhighlighter table caption {
+  text-align: left !important;
+  padding: .5em 0 0.5em 1em !important;
+}
+.syntaxhighlighter table td.code {
+  width: 100% !important;
+}
+.syntaxhighlighter table td.code .container {
+  position: relative !important;
+}
+.syntaxhighlighter table td.code .container textarea {
+  box-sizing: border-box !important;
+  position: absolute !important;
+  left: 0 !important;
+  top: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  border: none !important;
+  background: white !important;
+  padding-left: 1em !important;
+  overflow: hidden !important;
+  white-space: pre !important;
+}
+.syntaxhighlighter table td.gutter .line {
+  text-align: right !important;
+  padding: 2px 0.5em 2px 1em !important;
+}
+.syntaxhighlighter table td.code .line {
+  padding: 2px 1em !important;
+}
+.syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line {
+  padding-left: 0em !important;
+}
+.syntaxhighlighter.show {
+  display: block !important;
+}
+.syntaxhighlighter.collapsed table {
+  display: none !important;
+}
+.syntaxhighlighter.collapsed .toolbar {
+  padding: 0.1em 0.8em 0em 0.8em !important;
+  font-size: 1em !important;
+  position: static !important;
+  width: auto !important;
+  height: auto !important;
+}
+.syntaxhighlighter.collapsed .toolbar span {
+  display: inline !important;
+  margin-right: 1em !important;
+}
+.syntaxhighlighter.collapsed .toolbar span a {
+  padding: 0 !important;
+  display: none !important;
+}
+.syntaxhighlighter.collapsed .toolbar span a.expandSource {
+  display: inline !important;
+}
+.syntaxhighlighter .toolbar {
+  position: absolute !important;
+  right: 1px !important;
+  top: 1px !important;
+  font-size: 10px !important;
+  z-index: 10 !important;
+}
+.syntaxhighlighter .toolbar span.title {
+  display: inline !important;
+}
+.syntaxhighlighter .toolbar a {
+  display: block !important;
+  text-align: center !important;
+  text-decoration: none !important;
+  padding-top: 1px !important;
+}
+.syntaxhighlighter .toolbar a.expandSource {
+  display: none !important;
+}
+.syntaxhighlighter.ie {
+  font-size: .9em !important;
+  padding: 1px 0 1px 0 !important;
+}
+.syntaxhighlighter.ie .toolbar {
+  line-height: 8px !important;
+}
+.syntaxhighlighter.ie .toolbar a {
+  padding-top: 0px !important;
+}
+.syntaxhighlighter.printing .line.alt1 .content,
+.syntaxhighlighter.printing .line.alt2 .content,
+.syntaxhighlighter.printing .line.highlighted .number,
+.syntaxhighlighter.printing .line.highlighted.alt1 .content,
+.syntaxhighlighter.printing .line.highlighted.alt2 .content {
+  background: none !important;
+}
+.syntaxhighlighter.printing .line .number {
+  color: #bbbbbb !important;
+}
+.syntaxhighlighter.printing .line .content {
+  color: black !important;
+}
+.syntaxhighlighter.printing .toolbar {
+  display: none !important;
+}
+.syntaxhighlighter.printing a {
+  text-decoration: none !important;
+}
+.syntaxhighlighter.printing .plain, .syntaxhighlighter.printing .plain a {
+  color: black !important;
+}
+.syntaxhighlighter.printing .comments, .syntaxhighlighter.printing .comments a {
+  color: #008200 !important;
+}
+.syntaxhighlighter.printing .string, .syntaxhighlighter.printing .string a {
+  color: blue !important;
+}
+.syntaxhighlighter.printing .keyword {
+  color: #006699 !important;
+  font-weight: bold !important;
+}
+.syntaxhighlighter.printing .preprocessor {
+  color: gray !important;
+}
+.syntaxhighlighter.printing .variable {
+  color: #aa7700 !important;
+}
+.syntaxhighlighter.printing .value {
+  color: #009900 !important;
+}
+.syntaxhighlighter.printing .functions {
+  color: #ff1493 !important;
+}
+.syntaxhighlighter.printing .constants {
+  color: #0066cc !important;
+}
+.syntaxhighlighter.printing .script {
+  font-weight: bold !important;
+}
+.syntaxhighlighter.printing .color1, .syntaxhighlighter.printing .color1 a {
+  color: gray !important;
+}
+.syntaxhighlighter.printing .color2, .syntaxhighlighter.printing .color2 a {
+  color: #ff1493 !important;
+}
+.syntaxhighlighter.printing .color3, .syntaxhighlighter.printing .color3 a {
+  color: red !important;
+}
+.syntaxhighlighter.printing .break, .syntaxhighlighter.printing .break a {
+  color: black !important;
+}
+
+
+
+/**
+ * SyntaxHighlighter
+ * http://alexgorbatchev.com/SyntaxHighlighter
+ *
+ * SyntaxHighlighter is donationware. If you are using it, please donate.
+ * http://alexgorbatchev.com/SyntaxHighlighter/donate.html
+ *
+ * @version
+ * 3.0.83 (July 02 2010)
+ * 
+ * @copyright
+ * Copyright (C) 2004-2010 Alex Gorbatchev.
+ *
+ * @license
+ * Dual licensed under the MIT and GPL licenses.
+ */
+.syntaxhighlighter {
+  background-color: white !important;
+  font-size: 13px !important;
+  overflow: visible !important;
+}
+.syntaxhighlighter .line.alt1 {
+  background-color: white !important;
+}
+.syntaxhighlighter .line.alt2 {
+  background-color: #F8F8F8 !important;
+}
+.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
+  background-color: #e0e0e0 !important;
+}
+.syntaxhighlighter .line.highlighted.number {
+  color: black !important;
+}
+.syntaxhighlighter table caption {
+  color: black !important;
+}
+.syntaxhighlighter .gutter {
+}
+.syntaxhighlighter .gutter div {
+  color: #5C5C5C !important;
+  width: 20px !important;
+}
+.syntaxhighlighter .gutter .line.alt1, .syntaxhighlighter  .gutter .line.alt2 {
+  background-color: white !important;
+}
+.odd .syntaxhighlighter .gutter .line.alt1, .odd .syntaxhighlighter  .gutter .line.alt2 {
+  background-color: #F2F2F2 !important;
+}
+.syntaxhighlighter .gutter .line {
+  border-right: 3px solid #4E6CA3 !important;
+}
+.syntaxhighlighter .gutter .line.highlighted {
+  background-color: #4E6CA3 !important;
+  color: white !important;
+}
+.syntaxhighlighter.printing .line .content {
+  border: none !important;
+}
+.syntaxhighlighter.collapsed {
+  overflow: visible !important;
+}
+.syntaxhighlighter.collapsed .toolbar {
+  color: blue !important;
+  background: white !important;
+  border: 1px solid #4E6CA3 !important;
+}
+.syntaxhighlighter.collapsed .toolbar a {
+  color: blue !important;
+}
+.syntaxhighlighter.collapsed .toolbar a:hover {
+  color: red !important;
+}
+.syntaxhighlighter .toolbar {
+  color: white !important;
+  border: none !important;
+}
+.syntaxhighlighter .toolbar a {
+  font: 100%/1.45em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif !important;
+  color: white !important;
+  background: #4E6CA3 !important;
+  float: right !important;
+  padding: 2px 5px !important;
+  clear: both;
+}
+.syntaxhighlighter .toolbar a:hover {
+  color: #b7c5df !important;
+  background: #39568b !important;
+}
+.syntaxhighlighter .plain, .syntaxhighlighter .plain a {
+  color: black !important;
+}
+.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
+  color: #008200 !important;
+}
+.syntaxhighlighter .string, .syntaxhighlighter .string a {
+  color: blue !important;
+}
+.syntaxhighlighter .keyword {
+  color: #006699 !important;
+}
+.syntaxhighlighter .preprocessor {
+  color: gray !important;
+}
+.syntaxhighlighter .variable {
+  color: #aa7700 !important;
+}
+.syntaxhighlighter .value {
+  color: #009900 !important;
+}
+.syntaxhighlighter .functions {
+  color: #ff1493 !important;
+}
+.syntaxhighlighter .constants {
+  color: #0066cc !important;
+}
+.syntaxhighlighter .script {
+  font-weight: bold !important;
+  color: #006699 !important;
+  background-color: none !important;
+}
+.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
+  color: gray !important;
+}
+.syntaxhighlighter .color2, .syntaxhighlighter .color2 a {
+  color: #ff1493 !important;
+}
+.syntaxhighlighter .color3, .syntaxhighlighter .color3 a {
+  color: red !important;
+}
+
+.syntaxhighlighter .keyword {
+  font-weight: bold !important;
+}
+
+.datatables_ref:hover {
+	text-decoration: underline;
+	cursor: pointer;
+	*cursor: hand;
+}
+
+.syntaxhighlighter .dtapi {
+	color: #069;
+}
+
+.syntaxhighlighter .dtapi:hover {
+	text-decoration: underline;
+	cursor: pointer;
+	*cursor: hand;
+}
+

examples/examples_support/syntax/license/Syntax Highlighter

@@ -0,0 +1,20 @@
+Copyright (c) 2003, 2004 Jim Weirich
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

examples/index.html

@@ -29,6 +29,7 @@
 					<li><a href="basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="basic_init/state_save.html">State saving</a></li>
 					<li><a href="basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -47,7 +48,7 @@
 					<li>Events: <br>
 						<a href="advanced_init/events_live.html">Live events</a> / 
 						<a href="advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -61,6 +62,9 @@
 					<li><a href="advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -103,7 +107,6 @@
 					<li><a href="server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/plug-ins/dom_sort.html

@@ -960,7 +960,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>/* Create an array with the values of all the input boxes in a column */
+			<pre class="brush: js;">/* Create an array with the values of all the input boxes in a column */
 $.fn.dataTableExt.afnSortData['dom-text'] = function  ( oSettings, iColumn )
 {
 	var aData = [];
@@ -1003,6 +1003,10 @@ $(document).ready(function() {
 		]
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -1017,6 +1021,7 @@ $(document).ready(function() {
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -1035,7 +1040,7 @@ $(document).ready(function() {
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -1049,6 +1054,9 @@ $(document).ready(function() {
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -1091,7 +1099,6 @@ $(document).ready(function() {
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/plug-ins/html_sort.html

@@ -60,7 +60,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>jQuery.fn.dataTableExt.aTypes.push(
+			<pre class="brush: js;">jQuery.fn.dataTableExt.aTypes.push(
 	function ( sData ) {
 		return 'html';
 	}
@@ -69,6 +69,10 @@
 $(document).ready(function() {
 	$('#example').dataTable();
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -83,6 +87,7 @@ $(document).ready(function() {
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -101,7 +106,7 @@ $(document).ready(function() {
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -115,6 +120,9 @@ $(document).ready(function() {
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -157,7 +165,6 @@ $(document).ready(function() {
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/plug-ins/paging_plugin.html

@@ -18,29 +18,28 @@ $.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' );
+		var oLang = oSettings.oLanguage.oPaginate;
+		var oClasses = oSettings.oClasses;
+		var fnClickHandler = function ( e ) {
+			if ( oSettings.oApi._fnPageChange( oSettings, e.data.action ) )
+			{
+				fnCallbackDraw( oSettings );
+			}
+		};
+
+		var sAppend = (!oSettings.bJUI) ?
+			'<a class="'+oSettings.oClasses.sPagePrevDisabled+'" tabindex="'+oSettings.iTabIndex+'" role="button">'+oLang.sPrevious+'</a>'+
+			'<a class="'+oSettings.oClasses.sPageNextDisabled+'" tabindex="'+oSettings.iTabIndex+'" role="button">'+oLang.sNext+'</a>'
+			:
+			'<a class="'+oSettings.oClasses.sPagePrevDisabled+'" tabindex="'+oSettings.iTabIndex+'" role="button"><span class="'+oSettings.oClasses.sPageJUIPrev+'"></span></a>'+
+			'<a class="'+oSettings.oClasses.sPageNextDisabled+'" tabindex="'+oSettings.iTabIndex+'" role="button"><span class="'+oSettings.oClasses.sPageJUINext+'"></span></a>';
+		$(nPaging).append( sAppend );
 		
-		if ( oSettings.sTableId !== '' )
-		{
-			nPaging.setAttribute( 'id', oSettings.sTableId+'_paginate' );
-			nPrevious.setAttribute( 'id', oSettings.sTableId+'_previous' );
-			nNext.setAttribute( 'id', oSettings.sTableId+'_next' );
-		}
+		var els = $('a', nPaging);
+		var nPrevious = els[0],
+			nNext = els[1];
 		
-		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() {
+		oSettings.oApi._fnBindAction( nPrevious, {action: "previous"}, function() {
 			/* Disallow paging event during a current paging event */
 			if ( typeof oSettings.iPagingLoopStart != 'undefined' && oSettings.iPagingLoopStart != -1 )
 			{
@@ -69,8 +68,8 @@ $.fn.dataTableExt.oPagination.scrolling = {
 			};
 			innerLoop();
 		} );
-		
-		$(nNext).click( function() {
+
+		oSettings.oApi._fnBindAction( nNext, {action: "next"}, function() {
 			/* Disallow paging event during a current paging event */
 			if ( typeof oSettings.iPagingLoopStart != 'undefined' && oSettings.iPagingLoopStart != -1 )
 			{
@@ -98,10 +97,6 @@ $.fn.dataTableExt.oPagination.scrolling = {
 			};
 			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 )
@@ -577,7 +572,7 @@ $.fn.dataTableExt.oPagination.scrolling = {
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>/* Time between each scrolling frame */
+			<pre class="brush: js;">/* Time between each scrolling frame */
 $.fn.dataTableExt.oPagination.iTweenTime = 100;
 
 $.fn.dataTableExt.oPagination.scrolling = {
@@ -699,6 +694,10 @@ $(document).ready(function() {
 		"sPaginationType": "scrolling"
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -713,6 +712,7 @@ $(document).ready(function() {
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -731,7 +731,7 @@ $(document).ready(function() {
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -745,6 +745,9 @@ $(document).ready(function() {
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -787,7 +790,6 @@ $(document).ready(function() {
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/plug-ins/plugin_api.html

@@ -493,7 +493,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>/*
+			<pre class="brush: js;">/*
  * Function: fnGetHiddenTrNodes
  * Purpose:  Get all of the hidden TR nodes (i.e. the ones which aren't on display)
  * Returns:  array:
@@ -529,6 +529,10 @@ $(document).ready(function() {
 		alert( nHidden.length +' nodes were returned' );
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -543,6 +547,7 @@ $(document).ready(function() {
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -561,7 +566,7 @@ $(document).ready(function() {
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -575,6 +580,9 @@ $(document).ready(function() {
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -617,7 +625,6 @@ $(document).ready(function() {
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/plug-ins/range_filtering.html

@@ -499,7 +499,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>/* Custom filtering function which will filter data in column four between two values */
+			<pre class="brush: js;">/* Custom filtering function which will filter data in column four between two values */
 $.fn.dataTableExt.afnFiltering.push(
 	function( oSettings, aData, iDataIndex ) {
 		var iMin = document.getElementById('min').value * 1;
@@ -533,6 +533,10 @@ $(document).ready(function() {
 	$('#min').keyup( function() { oTable.fnDraw(); } );
 	$('#max').keyup( function() { oTable.fnDraw(); } );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -547,6 +551,7 @@ $(document).ready(function() {
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -565,7 +570,7 @@ $(document).ready(function() {
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -579,6 +584,9 @@ $(document).ready(function() {
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -621,7 +629,6 @@ $(document).ready(function() {
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/plug-ins/sorting_plugin.html

@@ -509,7 +509,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>/* Note 'unshift' does not work in IE6. A simply array concatenation would. This is used
+			<pre class="brush: js;">/* Note 'unshift' does not work in IE6. A simply array concatenation would. This is used
  * to give the custom type top priority
  */
 jQuery.fn.dataTableExt.aTypes.unshift(
@@ -562,6 +562,10 @@ jQuery.fn.dataTableExt.oSort['numeric-comma-desc'] = function(a,b) {
 $(document).ready(function() {
 	$('#example').dataTable();
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -576,6 +580,7 @@ $(document).ready(function() {
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -594,7 +599,7 @@ $(document).ready(function() {
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -608,6 +613,9 @@ $(document).ready(function() {
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -650,7 +658,6 @@ $(document).ready(function() {
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/plug-ins/sorting_sType.html

@@ -483,7 +483,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>jQuery.fn.dataTableExt.oSort['numeric-comma-asc']  = function(a,b) {
+			<pre class="brush: js;">jQuery.fn.dataTableExt.oSort['numeric-comma-asc']  = function(a,b) {
 	var x = (a == "-") ? 0 : a.replace( /,/, "." );
 	var y = (b == "-") ? 0 : b.replace( /,/, "." );
 	x = parseFloat( x );
@@ -510,6 +510,10 @@ $(document).ready(function() {
 		]
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 			
 			
 			<h1>Other examples</h1>
@@ -524,6 +528,7 @@ $(document).ready(function() {
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -542,7 +547,7 @@ $(document).ready(function() {
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -556,6 +561,9 @@ $(document).ready(function() {
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -598,7 +606,6 @@ $(document).ready(function() {
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/server_side/column_ordering.html

@@ -1,216 +0,0 @@
-<!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" />
-		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
-		
-		<title>DataTables example</title>
-		<style type="text/css" title="currentStyle">
-			@import "../../media/css/demo_page.css";
-			@import "../../media/css/demo_table.css";
-		</style>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
-		<script type="text/javascript" charset="utf-8">
-			$(document).ready(function() {
-				$('#example').dataTable( {
-					"bProcessing": true,
-					"bServerSide": true,
-					"sAjaxSource": "scripts/ordering.php",
-					"aoColumns": [
-						{ "sName": "engine" },
-						{ "sName": "browser" },
-						{ "sName": "platform" },
-						{ "sName": "version" },
-						{ "sName": "grade" }
-					]
-				} );
-			} );
-		</script>
-	</head>
-	<body id="dt_example">
-		<div id="container">
-			<div class="full_width big">
-				DataTables server-side column ordering example
-			</div>
-			
-			<h1>Preamble</h1>
-			<p>When using server-side processing it may be considerably easier on the server-side to output the data in an order which is not exactly that shown by the table to the end user. For this reason you can 'name' each column and this information will be sent to the server (comma delimited) as the variable 'sColumns' - this is the column information that DataTables expects to get back from a request.</p>
-			<p>Equally there you can defined an 'sColumns' in the JSON return which tells DataTables the order of the columns that has been returned. If the order is different from what it expects, then it will automatically re-order for you. The following example shows a server-side return which gives the columns "out of order".</p>
-			
-			<h1>Live example</h1>
-			<div id="dynamic">
-<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
-	<thead>
-		<tr>
-			<th width="20%">Rendering engine</th>
-			<th width="25%">Browser</th>
-			<th width="25%">Platform(s)</th>
-			<th width="15%">Engine version</th>
-			<th width="15%">CSS grade</th>
-		</tr>
-	</thead>
-	<tbody>
-		<tr>
-			<td colspan="5" class="dataTables_empty">Loading data from server</td>
-		</tr>
-	</tbody>
-	<tfoot>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>CSS grade</th>
-		</tr>
-	</tfoot>
-</table>
-			</div>
-			<div class="spacer"></div>
-			
-			
-			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
-	$('#example').dataTable( {
-		"bProcessing": true,
-		"bServerSide": true,
-		"sAjaxSource": "scripts/ordering.php",
-		"aoColumns": [
-			{ "sName": "engine" },
-			{ "sName": "browser" },
-			{ "sName": "platform" },
-			{ "sName": "version" },
-			{ "sName": "grade" }
-		]
-	} );
-} );</pre>
-			
-			
-			<h1>Other examples</h1>
-			<div class="demo_links">
-				<h2>Basic initialisation</h2>
-				<ul>
-					<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
-					<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
-					<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
-					<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
-					<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
-					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-					<li><a href="../basic_init/state_save.html">State saving</a></li>
-					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
-					<li>Scrolling: <br>
-						<a href="../basic_init/scroll_x.html">Horizontal</a> / 
-						<a href="../basic_init/scroll_y.html">Vertical</a> / 
-						<a href="../basic_init/scroll_xy.html">Both</a> / 
-						<a href="../basic_init/scroll_y_theme.html">Themed</a> / 
-						<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
-					</li>
-					<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
-					<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
-				</ul>
-				
-				<h2>Advanced initialisation</h2>
-				<ul>
-					<li>Events: <br>
-						<a href="../advanced_init/events_live.html">Live events</a> / 
-						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
-					</li>
-					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
-					<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
-					<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
-					<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
-					<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
-					<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
-					<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
-					<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
-					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
-					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
-					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
-				</ul>
-				
-				<h2>API</h2>
-				<ul>
-					<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
-					<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
-					<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
-					<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
-					<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
-					<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
-					<li><a href="../api/form.html">Submit form with elements in table</a></li>
-					<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
-					<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
-					<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
-					<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
-					<li><a href="../api/regex.html">Regular expression filtering</a></li>
-				</ul>
-			</div>
-			
-			<div class="demo_links">
-				<h2>Data sources</h2>
-				<ul>
-					<li><a href="../data_sources/dom.html">DOM</a></li>
-					<li><a href="../data_sources/js_array.html">Javascript array</a></li>
-					<li><a href="../data_sources/ajax.html">Ajax source</a></li>
-					<li><a href="../data_sources/server_side.html">Server side processing</a></li>
-				</ul>
-				
-				<h2>Server-side processing</h2>
-				<ul>
-					<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
-					<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
-					<li><a href="../server_side/post.html">Use HTTP POST</a></li>
-					<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
-					<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
-					<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
-					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
-					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
-					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
-				</ul>
-				
-				<h2>Ajax data source</h2>
-				<ul>
-					<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
-					<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
-					<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
-					<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
-					<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
-					<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
-					<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
-				</ul>
-				
-				<h2>Plug-ins</h2>
-				<ul>
-					<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
-					<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
-					<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
-					<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
-					<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
-					<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
-					<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
-				</ul>
-			</div>
-			
-			
-			<div id="footer" class="clear" style="text-align:center;">
-				<p>
-					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
-					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
-				</p>
-				
-				<span style="font-size:10px;">
-					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
-					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
-				</span>
-			</div>
-		</div>
-	</body>
-</html>

examples/server_side/custom_vars.html

@@ -17,13 +17,8 @@
 					"bProcessing": true,
 					"bServerSide": true,
 					"sAjaxSource": "scripts/server_processing.php",
-					"fnServerData": function ( sSource, aoData, fnCallback ) {
-						/* Add some extra data to the sender */
+					"fnServerParams": function ( aoData ) {
 						aoData.push( { "name": "more_data", "value": "my_value" } );
-						$.getJSON( sSource, aoData, function (json) { 
-							/* Do whatever additional processing you want on the callback, then tell DataTables */
-							fnCallback(json);
-						} );
 					}
 				} );
 			} );
@@ -36,7 +31,7 @@
 			</div>
 			
 			<h1>Preamble</h1>
-			<p>It can often be useful to send a little bit of extra information to the server when utilising DataTables' server-side processing option. This can be done by overriding the function used internally to get the JSON data from the server through the use of the "fnServerData" callback. This function takes three parameters (the same as <a href="http://docs.jquery.com/Ajax/jQuery.getJSON">$.getJSON()</a>, to be manipulated as you wish. This allows you to add extra data to the second parameter and then make the AJAX call, or you can call a Google Gears DB, or whatever you want. This example shows adding a single extra HTTP variable.</p>
+			<p>It can often be useful to send a little bit of extra information to the server when utilising DataTables' server-side processing option. This can be done by using the <a href="http://datatables.net/ref#fnServerParams">fnServerParams</a> callback function which is called whenever an XHR is sent to the server. fnServerParams Takes a single parameter, the array of name/value pairs of parameters that are to be sent to the server. You can manipulate this as you require - typically adding another parameter, as shown in this example.</p>
 			
 			<h1>Live example</h1>
 			<div id="dynamic">
@@ -70,21 +65,24 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"bProcessing": true,
 		"bServerSide": true,
-		"sAjaxSource": "scripts/server_processing.php",
-		"fnServerData": function ( sSource, aoData, fnCallback ) {
-			/* Add some extra data to the sender */
+		"sAjaxSource": "scripts/server_processing.php"
+		"fnServerParams": function ( aoData ) {
 			aoData.push( { "name": "more_data", "value": "my_value" } );
-			$.getJSON( sSource, aoData, function (json) { 
-				/* Do whatever additional processing you want on the callback, then tell DataTables */
-				fnCallback(json)
-			} );
 		}
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+
+			<h1>Server response</h1>
+			<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
+			<pre id="latest_xhr" class="brush: js;"></pre>
 			
 			
 			<h1>Other examples</h1>
@@ -99,6 +97,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -117,7 +116,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -131,6 +130,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -173,7 +175,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/server_side/defer_loading.html

@@ -130,7 +130,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"bProcessing": true,
 		"bServerSide": true,
@@ -138,6 +138,14 @@
 		"iDeferLoading": 57
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+
+			<h1>Server response</h1>
+			<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
+			<pre id="latest_xhr" class="brush: js;"></pre>
 			
 			
 			<h1>Other examples</h1>
@@ -152,6 +160,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -170,7 +179,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -184,6 +193,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -226,7 +238,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/server_side/editable.html

@@ -39,6 +39,7 @@
 			
 			<h1>Preamble</h1>
 			<p>When using server-side processing and you wish to integrate the <a href="http://www.appelsiini.net/projects/jeditable">jEditable plug-in for jQuery</a> with DataTables, you need to consider that each time data is returned from the server, DataTables will build new DOM elements - so these need the jEditable event handlers applied to them. This is down through use of the fnDrawCallback function.</p>
+			<p>If you are interested in a full <a href="http://en.wikipedia.org/wiki/Create,_read,_update_and_delete">CRUD</a> implementation for DataTables, check out the <a href="http://editor.datatables.net">Editor plug-in for DataTables</a>, which provides a flexible and easy to use create, edit and delete environment for DataTables controlled tables with full server interaction.</p>
 			
 			<h1>Live example</h1>
 			<div id="dynamic">
@@ -72,7 +73,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	var oTable = $('#example').dataTable( {
 		"bProcessing": true,
 		"bServerSide": true,
@@ -88,6 +89,14 @@
 		}
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+
+			<h1>Server response</h1>
+			<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
+			<pre id="latest_xhr" class="brush: js;"></pre>
 			
 			
 			<h1>Other examples</h1>
@@ -102,6 +111,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -120,7 +130,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -134,6 +144,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -176,7 +189,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/server_side/ids.html

@@ -62,13 +62,21 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"bProcessing": true,
 		"bServerSide": true,
-		"sAjaxSource": "scripts/ids.php"
+		"sAjaxSource": "scripts/id.php"
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+
+			<h1>Server response</h1>
+			<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
+			<pre id="latest_xhr" class="brush: js;"></pre>
 			
 			
 			<h1>Other examples</h1>
@@ -83,6 +91,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -101,7 +110,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -115,6 +124,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -157,7 +169,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/server_side/jsonp.html

@@ -17,8 +17,8 @@
 					"bProcessing": true,
 					"bServerSide": true,
 					"sAjaxSource": "scripts/jsonp.php",
-					"fnServerData": function( sUrl, aoData, fnCallback ) {
-						$.ajax( {
+					"fnServerData": function( sUrl, aoData, fnCallback, oSettings ) {
+						oSettings.jqXHR = $.ajax( {
 							"url": sUrl,
 							"data": aoData,
 							"success": fnCallback,
@@ -71,13 +71,13 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"bProcessing": true,
 		"bServerSide": true,
 		"sAjaxSource": "scripts/jsonp.php",
-		"fnServerData": function( sUrl, aoData, fnCallback ) {
-			$.ajax( {
+		"fnServerData": function( sUrl, aoData, fnCallback, oSettings ) {
+			oSettings.jqXHR = $.ajax( {
 				"url": sUrl,
 				"data": aoData,
 				"success": fnCallback,
@@ -87,6 +87,14 @@
 		}
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+
+			<h1>Server response</h1>
+			<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
+			<pre id="latest_xhr" class="brush: js;"></pre>
 			
 			
 			<h1>Other examples</h1>
@@ -101,6 +109,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -119,7 +128,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -133,6 +142,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -175,7 +187,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/server_side/object_data.html

@@ -18,11 +18,11 @@
 					"bServerSide": true,
 					"sAjaxSource": "scripts/objects.php",
 					"aoColumns": [
-						{ "mDataProp": "engine" },
-						{ "mDataProp": "browser" },
-						{ "mDataProp": "platform" },
-						{ "mDataProp": "version" },
-						{ "mDataProp": "grade" }
+						{ "mData": "engine" },
+						{ "mData": "browser" },
+						{ "mData": "platform" },
+						{ "mData": "version" },
+						{ "mData": "grade" }
 					]
 				} );
 			} );
@@ -36,7 +36,7 @@
 			
 			<h1>Preamble</h1>
 			<p>The "native" data format that DataTables expects for server-side processing is a 2D array of data (rows by columns). However, this is often not flexible enough for either the server-side environment, or you might want to convey more information in the data source than is necessary to show in the table (row IDs from the database for example). For this DataTables supports the reading of data for objects as well as arrays.</p>
-			<p>In this example the server responds with an array of objects, and DataTables will look up each property that is specified by the <b>mDataProp</b> property given for each column</p>
+			<p>In this example the server responds with an array of objects, and DataTables will look up each property that is specified by the <b>mData</b> property given for each column</p>
 			
 			<h1>Live example</h1>
 			<div id="dynamic">
@@ -70,20 +70,28 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"bProcessing": true,
 		"bServerSide": true,
 		"sAjaxSource": "scripts/objects.php",
 		"aoColumns": [
-			{ "mDataProp": "engine" },
-			{ "mDataProp": "browser" },
-			{ "mDataProp": "platform" },
-			{ "mDataProp": "version" },
-			{ "mDataProp": "grade" }
+			{ "mData": "engine" },
+			{ "mData": "browser" },
+			{ "mData": "platform" },
+			{ "mData": "version" },
+			{ "mData": "grade" }
 		]
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+
+			<h1>Server response</h1>
+			<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
+			<pre id="latest_xhr" class="brush: js;"></pre>
 			
 			
 			<h1>Other examples</h1>
@@ -98,6 +106,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -116,7 +125,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -130,6 +139,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -172,7 +184,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/server_side/pipeline.html

@@ -39,7 +39,7 @@
 				return null;
 			}
 			
-			function fnDataTablesPipeline ( sSource, aoData, fnCallback ) {
+			function fnDataTablesPipeline ( sSource, aoData, fnCallback, oSettings ) {
 				var iPipe = 5; /* Ajust the pipe size */
 				
 				var bNeedServer = false;
@@ -91,7 +91,7 @@
 					fnSetKey( aoData, "iDisplayStart", iRequestStart );
 					fnSetKey( aoData, "iDisplayLength", iRequestLength*iPipe );
 					
-					$.getJSON( sSource, aoData, function (json) { 
+					oSettings.jqXHR = $.getJSON( sSource, aoData, function (json) { 
 						/* Callback processing */
 						oCache.lastJson = jQuery.extend(true, {}, json);
 						
@@ -133,7 +133,7 @@
 			
 			<h1>Preamble</h1>
 			<p>When using server-side processing with DataTables, it can be quite intensive on your server having an Ajax call every time the user performs some kind of interaction - you can effectively DDOS your server with your own application!</p>
-			<p>This example shows how you might over-come this by modifying the request set to the server to retrieve more information than is actually required for a single page's display. This means that the user can page multiple times (5 times the display size is the default) before a request must be made of the server. Paging is typically the most common interaction performed with a DataTable, so this can be most beneficial to your server's resource usage. Of course the pipeline must be cleared for interactions other than paging (sorting, filtering etc), but that's the trade off that can be made (sending extra information is cheep - while another XHR is expensive).</p>
+			<p>This example shows how you might over-come this by modifying the request set to the server to retrieve more information than is actually required for a single page's display. This means that the user can page multiple times (5 times the display size is the default) before a request must be made of the server. Paging is typically the most common interaction performed with a DataTable, so this can be most beneficial to your server's resource usage. Of course the pipeline must be cleared for interactions other than paging (sorting, filtering etc), but that's the trade off that can be made (sending extra information is cheap - while another XHR is expensive).</p>
 			
 			<h1>Live example</h1>
 			<div id="dynamic">
@@ -167,7 +167,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>var oCache = {
+			<pre class="brush: js;">var oCache = {
 	iCacheLower: -1
 };
 
@@ -278,6 +278,14 @@ $(document).ready(function() {
 		"fnServerData": fnDataTablesPipeline
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+
+			<h1>Server response</h1>
+			<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
+			<pre id="latest_xhr" class="brush: js;"></pre>
 			
 			
 			<h1>Other examples</h1>
@@ -292,6 +300,7 @@ $(document).ready(function() {
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -310,7 +319,7 @@ $(document).ready(function() {
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -324,6 +333,9 @@ $(document).ready(function() {
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -366,7 +378,6 @@ $(document).ready(function() {
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/server_side/post.html

@@ -17,15 +17,7 @@
 					"bProcessing": true,
 					"bServerSide": true,
 					"sAjaxSource": "scripts/post.php",
-					"fnServerData": function ( sSource, aoData, fnCallback ) {
-						$.ajax( {
-							"dataType": 'json', 
-							"type": "POST", 
-							"url": sSource, 
-							"data": aoData, 
-							"success": fnCallback
-						} );
-					}
+					"sServerMethod": "POST"
 				} );
 			} );
 		</script>
@@ -37,7 +29,7 @@
 			</div>
 			
 			<h1>Preamble</h1>
-			<p>The default HTTP method that DataTables uses to get data from the server-side if GET, however, there are times when you may wish to use POST. This is very easy using the fnServerData() initialisation parameter, as shown in this example.</p>
+			<p>The default HTTP method that DataTables uses to get data from the server-side if GET, however, there are times when you may wish to use POST. This is very easy using the sServerMethod initialisation parameter, which is simply set to the HTTP method that you want to use - the default is 'GET' and this example shows 'POST' being used.</p>
 			
 			<h1>Live example</h1>
 			<div id="dynamic">
@@ -71,22 +63,22 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	$('#example').dataTable( {
 		"bProcessing": true,
 		"bServerSide": true,
 		"sAjaxSource": "scripts/post.php",
-		"fnServerData": function ( sSource, aoData, fnCallback ) {
-			$.ajax( {
-				"dataType": 'json', 
-				"type": "POST", 
-				"url": sSource, 
-				"data": aoData, 
-				"success": fnCallback
-			} );
-		}
+		"sServerMethod": "POST"
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+
+			<h1>Server response</h1>
+			<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
+			<pre id="latest_xhr" class="brush: js;"></pre>
 			
 			
 			<h1>Other examples</h1>
@@ -101,6 +93,7 @@
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -119,7 +112,7 @@
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -133,6 +126,9 @@
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -175,7 +171,6 @@
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/server_side/row_details.html

@@ -44,8 +44,8 @@
 				} );
 				
 				$('#example tbody td img').live( 'click', function () {
-					var nTr = this.parentNode.parentNode;
-					if ( this.src.match('details_close') )
+					var nTr = $(this).parents('tr')[0];
+					if ( oTable.fnIsOpen(nTr) )
 					{
 						/* This row is already open - close it */
 						this.src = "../examples_support/details_open.png";
@@ -68,7 +68,7 @@
 			</div>
 			
 			<h1>Preamble</h1>
-			<p>This example shows how you might modify the client-side show/hide details rows example for use with DataTables 1.5's server-side processing option.</p>
+			<p>This example shows how you might modify the client-side show/hide details rows example for use with DataTables server-side processing option.</p>
 			
 			<h1>Live example</h1>
 			<div id="dynamic">
@@ -104,7 +104,7 @@
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>var oTable;
+			<pre class="brush: js;">var oTable;
 
 /* Formating function for row details */
 function fnFormatDetails ( nTr )
@@ -136,8 +136,8 @@ $(document).ready(function() {
 	} );
 	
 	$('#example tbody td img').live( 'click', function () {
-		var nTr = this.parentNode.parentNode;
-		if ( this.src.match('details_close') )
+		var nTr = $(this).parents('tr')[0];
+		if ( oTable.fnIsOpen(nTr) )
 		{
 			/* This row is already open - close it */
 			this.src = "../examples_support/details_open.png";
@@ -151,6 +151,14 @@ $(document).ready(function() {
 		}
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+
+			<h1>Server response</h1>
+			<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
+			<pre id="latest_xhr" class="brush: js;"></pre>
 			
 			
 			<h1>Other examples</h1>
@@ -165,6 +173,7 @@ $(document).ready(function() {
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -183,7 +192,7 @@ $(document).ready(function() {
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -197,6 +206,9 @@ $(document).ready(function() {
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -239,7 +251,6 @@ $(document).ready(function() {
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>
 				

examples/server_side/scripts/custom_data_property.php

@@ -29,14 +29,28 @@
 	 * no need to edit below this line
 	 */
 	
+	/* 
+	 * Local functions
+	 */
+	function fatal_error ( $sErrorMessage = '' )
+	{
+		header( $_SERVER['SERVER_PROTOCOL'] .' 500 Internal Server Error' );
+		die( $sErrorMessage );
+	}
+
+	
 	/* 
 	 * MySQL connection
 	 */
-	$gaSql['link'] =  mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password']  ) or
-		die( 'Could not open connection to server' );
-	
-	mysql_select_db( $gaSql['db'], $gaSql['link'] ) or 
-		die( 'Could not select database '. $gaSql['db'] );
+	if ( ! $gaSql['link'] = mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password']  ) )
+	{
+		fatal_error( 'Could not open connection to server' );
+	}
+
+	if ( ! mysql_select_db( $gaSql['db'], $gaSql['link'] ) )
+	{
+		fatal_error( 'Could not select database ' );
+	}
 	
 	
 	/* 
@@ -86,7 +100,10 @@
 		$sWhere = "WHERE (";
 		for ( $i=0 ; $i<count($aColumns) ; $i++ )
 		{
-			$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
+			if ( isset($_GET['bSearchable_'.$i]) && $_GET['bSearchable_'.$i] == "true" )
+			{
+				$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
+			}
 		}
 		$sWhere = substr_replace( $sWhere, "", -3 );
 		$sWhere .= ')';
@@ -121,13 +138,13 @@
 		$sOrder
 		$sLimit
 	";
-	$rResult = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
+	$rResult = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
 	
 	/* Data set length after filtering */
 	$sQuery = "
 		SELECT FOUND_ROWS()
 	";
-	$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
+	$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
 	$aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
 	$iFilteredTotal = $aResultFilterTotal[0];
 	
@@ -136,7 +153,7 @@
 		SELECT COUNT(".$sIndexColumn.")
 		FROM   $sTable
 	";
-	$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
+	$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
 	$aResultTotal = mysql_fetch_array($rResultTotal);
 	$iTotal = $aResultTotal[0];
 	

examples/server_side/scripts/details_col.php

@@ -29,14 +29,28 @@
 	 * no need to edit below this line
 	 */
 	
+	/* 
+	 * Local functions
+	 */
+	function fatal_error ( $sErrorMessage = '' )
+	{
+		header( $_SERVER['SERVER_PROTOCOL'] .' 500 Internal Server Error' );
+		die( $sErrorMessage );
+	}
+
+	
 	/* 
 	 * MySQL connection
 	 */
-	$gaSql['link'] =  mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password']  ) or
-		die( 'Could not open connection to server' );
-	
-	mysql_select_db( $gaSql['db'], $gaSql['link'] ) or 
-		die( 'Could not select database '. $gaSql['db'] );
+	if ( ! $gaSql['link'] = mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password']  ) )
+	{
+		fatal_error( 'Could not open connection to server' );
+	}
+
+	if ( ! mysql_select_db( $gaSql['db'], $gaSql['link'] ) )
+	{
+		fatal_error( 'Could not select database ' );
+	}
 	
 	
 	/* 
@@ -86,7 +100,10 @@
 		$sWhere = "WHERE (";
 		for ( $i=0 ; $i<count($aColumns) ; $i++ )
 		{
-			$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
+			if ( isset($_GET['bSearchable_'.$i]) && $_GET['bSearchable_'.$i] == "true" )
+			{
+				$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
+			}
 		}
 		$sWhere = substr_replace( $sWhere, "", -3 );
 		$sWhere .= ')';
@@ -121,13 +138,13 @@
 		$sOrder
 		$sLimit
 	";
-	$rResult = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
+	$rResult = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
 	
 	/* Data set length after filtering */
 	$sQuery = "
 		SELECT FOUND_ROWS()
 	";
-	$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
+	$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
 	$aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
 	$iFilteredTotal = $aResultFilterTotal[0];
 	
@@ -136,7 +153,7 @@
 		SELECT COUNT(".$sIndexColumn.")
 		FROM   $sTable
 	";
-	$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
+	$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
 	$aResultTotal = mysql_fetch_array($rResultTotal);
 	$iTotal = $aResultTotal[0];
 	

examples/server_side/scripts/filter_col.php

@@ -2,11 +2,30 @@
   /* MySQL connection */
 	include( $_SERVER['DOCUMENT_ROOT']."/datatables/mysql.php" ); /* ;-) */
 	
-	$gaSql['link'] =  mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password']  ) or
-		die( 'Could not open connection to server' );
+	/* 
+	 * Local functions
+	 */
+	function fatal_error ( $sErrorMessage = '' )
+	{
+		header( $_SERVER['SERVER_PROTOCOL'] .' 500 Internal Server Error' );
+		die( $sErrorMessage );
+	}
+
 	
-	mysql_select_db( $gaSql['db'], $gaSql['link'] ) or 
-		die( 'Could not select database '. $gaSql['db'] );
+	/* 
+	 * MySQL connection
+	 */
+	if ( ! $gaSql['link'] = mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password']  ) )
+	{
+		fatal_error( 'Could not open connection to server' );
+	}
+
+	if ( ! mysql_select_db( $gaSql['db'], $gaSql['link'] ) )
+	{
+		fatal_error( 'Could not select database ' );
+	}
+
+
 	
 	/* Paging */
 	$sLimit = "";
@@ -65,12 +84,12 @@
 		$sOrder
 		$sLimit
 	";
-	$rResult = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
+	$rResult = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
 	
 	$sQuery = "
 		SELECT FOUND_ROWS()
 	";
-	$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
+	$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
 	$aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
 	$iFilteredTotal = $aResultFilterTotal[0];
 	
@@ -78,7 +97,7 @@
 		SELECT COUNT(id)
 		FROM   ajax
 	";
-	$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
+	$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
 	$aResultTotal = mysql_fetch_array($rResultTotal);
 	$iTotal = $aResultTotal[0];
 	

examples/server_side/scripts/id.php

@@ -29,14 +29,28 @@
 	 * no need to edit below this line
 	 */
 	
+	/* 
+	 * Local functions
+	 */
+	function fatal_error ( $sErrorMessage = '' )
+	{
+		header( $_SERVER['SERVER_PROTOCOL'] .' 500 Internal Server Error' );
+		die( $sErrorMessage );
+	}
+
+	
 	/* 
 	 * MySQL connection
 	 */
-	$gaSql['link'] =  mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password']  ) or
-		die( 'Could not open connection to server' );
-	
-	mysql_select_db( $gaSql['db'], $gaSql['link'] ) or 
-		die( 'Could not select database '. $gaSql['db'] );
+	if ( ! $gaSql['link'] = mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password']  ) )
+	{
+		fatal_error( 'Could not open connection to server' );
+	}
+
+	if ( ! mysql_select_db( $gaSql['db'], $gaSql['link'] ) )
+	{
+		fatal_error( 'Could not select database ' );
+	}
 	
 	
 	/* 
@@ -86,7 +100,10 @@
 		$sWhere = "WHERE (";
 		for ( $i=0 ; $i<count($aColumns) ; $i++ )
 		{
-			$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
+			if ( isset($_GET['bSearchable_'.$i]) && $_GET['bSearchable_'.$i] == "true" )
+			{
+				$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
+			}
 		}
 		$sWhere = substr_replace( $sWhere, "", -3 );
 		$sWhere .= ')';
@@ -121,13 +138,13 @@
 		$sOrder
 		$sLimit
 	";
-	$rResult = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
+	$rResult = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
 	
 	/* Data set length after filtering */
 	$sQuery = "
 		SELECT FOUND_ROWS()
 	";
-	$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
+	$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
 	$aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
 	$iFilteredTotal = $aResultFilterTotal[0];
 	
@@ -136,7 +153,7 @@
 		SELECT COUNT(".$sIndexColumn.")
 		FROM   $sTable
 	";
-	$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
+	$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
 	$aResultTotal = mysql_fetch_array($rResultTotal);
 	$iTotal = $aResultTotal[0];
 	

examples/server_side/scripts/id_jsonp.php

@@ -0,0 +1,196 @@
+<?php
+	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+	 * Easy set variables
+	 */
+	
+	/* Array of database columns which should be read and sent back to DataTables. Use a space where
+	 * you want to insert a non-database field (for example a counter or static image)
+	 */
+	$aColumns = array( 'engine', 'browser', 'platform', 'version', 'grade' );
+	
+	/* Indexed column (used for fast and accurate table cardinality) */
+	$sIndexColumn = "id";
+	
+	/* DB table to use */
+	$sTable = "ajax";
+	
+	/* Database connection information */
+	$gaSql['user']       = "";
+	$gaSql['password']   = "";
+	$gaSql['db']         = "";
+	$gaSql['server']     = "localhost";
+	
+	/* REMOVE THIS LINE (it just includes my SQL connection user/pass) */
+	include( $_SERVER['DOCUMENT_ROOT']."/datatables/mysql.php" );
+	
+	
+	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+	 * If you just want to use the basic configuration for DataTables with PHP server-side, there is
+	 * no need to edit below this line
+	 */
+	
+	/* 
+	 * Local functions
+	 */
+	function fatal_error ( $sErrorMessage = '' )
+	{
+		header( $_SERVER['SERVER_PROTOCOL'] .' 500 Internal Server Error' );
+		die( $sErrorMessage );
+	}
+
+	
+	/* 
+	 * MySQL connection
+	 */
+	if ( ! $gaSql['link'] = mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password']  ) )
+	{
+		fatal_error( 'Could not open connection to server' );
+	}
+
+	if ( ! mysql_select_db( $gaSql['db'], $gaSql['link'] ) )
+	{
+		fatal_error( 'Could not select database ' );
+	}
+	
+	
+	/* 
+	 * Paging
+	 */
+	$sLimit = "";
+	if ( isset( $_GET['iDisplayStart'] ) && $_GET['iDisplayLength'] != '-1' )
+	{
+		$sLimit = "LIMIT ".mysql_real_escape_string( $_GET['iDisplayStart'] ).", ".
+			mysql_real_escape_string( $_GET['iDisplayLength'] );
+	}
+	
+	
+	/*
+	 * Ordering
+	 */
+	$sOrder = "";
+	if ( isset( $_GET['iSortCol_0'] ) )
+	{
+		$sOrder = "ORDER BY  ";
+		for ( $i=0 ; $i<intval( $_GET['iSortingCols'] ) ; $i++ )
+		{
+			if ( $_GET[ 'bSortable_'.intval($_GET['iSortCol_'.$i]) ] == "true" )
+			{
+				$sOrder .= $aColumns[ intval( $_GET['iSortCol_'.$i] ) ]."
+				 	".mysql_real_escape_string( $_GET['sSortDir_'.$i] ) .", ";
+			}
+		}
+		
+		$sOrder = substr_replace( $sOrder, "", -2 );
+		if ( $sOrder == "ORDER BY" )
+		{
+			$sOrder = "";
+		}
+	}
+	
+	
+	/* 
+	 * Filtering
+	 * NOTE this does not match the built-in DataTables filtering which does it
+	 * word by word on any field. It's possible to do here, but concerned about efficiency
+	 * on very large tables, and MySQL's regex functionality is very limited
+	 */
+	$sWhere = "";
+	if ( isset($_GET['sSearch']) && $_GET['sSearch'] != "" )
+	{
+		$sWhere = "WHERE (";
+		for ( $i=0 ; $i<count($aColumns) ; $i++ )
+		{
+			if ( isset($_GET['bSearchable_'.$i]) && $_GET['bSearchable_'.$i] == "true" )
+			{
+				$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
+			}
+		}
+		$sWhere = substr_replace( $sWhere, "", -3 );
+		$sWhere .= ')';
+	}
+	
+	/* Individual column filtering */
+	for ( $i=0 ; $i<count($aColumns) ; $i++ )
+	{
+		if ( isset($_GET['bSearchable_'.$i]) && $_GET['bSearchable_'.$i] == "true" && $_GET['sSearch_'.$i] != '' )
+		{
+			if ( $sWhere == "" )
+			{
+				$sWhere = "WHERE ";
+			}
+			else
+			{
+				$sWhere .= " AND ";
+			}
+			$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string($_GET['sSearch_'.$i])."%' ";
+		}
+	}
+	
+	
+	/*
+	 * SQL queries
+	 * Get data to display
+	 */
+	$sQuery = "
+		SELECT SQL_CALC_FOUND_ROWS id, ".str_replace(" , ", " ", implode(", ", $aColumns))."
+		FROM   $sTable
+		$sWhere
+		$sOrder
+		$sLimit
+	";
+	$rResult = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
+	
+	/* Data set length after filtering */
+	$sQuery = "
+		SELECT FOUND_ROWS()
+	";
+	$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
+	$aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
+	$iFilteredTotal = $aResultFilterTotal[0];
+	
+	/* Total data set length */
+	$sQuery = "
+		SELECT COUNT(".$sIndexColumn.")
+		FROM   $sTable
+	";
+	$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
+	$aResultTotal = mysql_fetch_array($rResultTotal);
+	$iTotal = $aResultTotal[0];
+	
+	
+	/*
+	 * Output
+	 */
+	$output = array(
+		"sEcho" => intval($_GET['sEcho']),
+		"iTotalRecords" => $iTotal,
+		"iTotalDisplayRecords" => $iFilteredTotal,
+		"aaData" => array()
+	);
+	
+	while ( $aRow = mysql_fetch_array( $rResult ) )
+	{
+		$row = array();
+		
+		// Add the row ID and class to the object
+		$row['DT_RowId'] = 'row_'.$aRow['id'];
+		$row['DT_RowClass'] = 'grade'.$aRow['grade'];
+		
+		for ( $i=0 ; $i<count($aColumns) ; $i++ )
+		{
+			if ( $aColumns[$i] == "version" )
+			{
+				/* Special output formatting for 'version' column */
+				$row[] = ($aRow[ $aColumns[$i] ]=="0") ? '-' : $aRow[ $aColumns[$i] ];
+			}
+			else if ( $aColumns[$i] != ' ' )
+			{
+				/* General output */
+				$row[] = $aRow[ $aColumns[$i] ];
+			}
+		}
+		$output['aaData'][] = $row;
+	}
+	
+	echo $_GET['callback'].'('.json_encode( $output ).');';
+?>

examples/server_side/scripts/jsonp.php

@@ -29,14 +29,28 @@
 	 * no need to edit below this line
 	 */
 	
+	/* 
+	 * Local functions
+	 */
+	function fatal_error ( $sErrorMessage = '' )
+	{
+		header( $_SERVER['SERVER_PROTOCOL'] .' 500 Internal Server Error' );
+		die( $sErrorMessage );
+	}
+
+	
 	/* 
 	 * MySQL connection
 	 */
-	$gaSql['link'] =  mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password']  ) or
-		die( 'Could not open connection to server' );
-	
-	mysql_select_db( $gaSql['db'], $gaSql['link'] ) or 
-		die( 'Could not select database '. $gaSql['db'] );
+	if ( ! $gaSql['link'] = mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password']  ) )
+	{
+		fatal_error( 'Could not open connection to server' );
+	}
+
+	if ( ! mysql_select_db( $gaSql['db'], $gaSql['link'] ) )
+	{
+		fatal_error( 'Could not select database ' );
+	}
 	
 	
 	/* 
@@ -86,7 +100,10 @@
 		$sWhere = "WHERE (";
 		for ( $i=0 ; $i<count($aColumns) ; $i++ )
 		{
-			$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
+			if ( isset($_GET['bSearchable_'.$i]) && $_GET['bSearchable_'.$i] == "true" )
+			{
+				$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
+			}
 		}
 		$sWhere = substr_replace( $sWhere, "", -3 );
 		$sWhere .= ')';
@@ -121,13 +138,13 @@
 		$sOrder
 		$sLimit
 	";
-	$rResult = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
+	$rResult = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
 	
 	/* Data set length after filtering */
 	$sQuery = "
 		SELECT FOUND_ROWS()
 	";
-	$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
+	$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
 	$aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
 	$iFilteredTotal = $aResultFilterTotal[0];
 	
@@ -136,7 +153,7 @@
 		SELECT COUNT(".$sIndexColumn.")
 		FROM   $sTable
 	";
-	$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
+	$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
 	$aResultTotal = mysql_fetch_array($rResultTotal);
 	$iTotal = $aResultTotal[0];
 	

examples/server_side/scripts/objects.php

@@ -29,14 +29,28 @@
 	 * no need to edit below this line
 	 */
 	
+	/* 
+	 * Local functions
+	 */
+	function fatal_error ( $sErrorMessage = '' )
+	{
+		header( $_SERVER['SERVER_PROTOCOL'] .' 500 Internal Server Error' );
+		die( $sErrorMessage );
+	}
+
+	
 	/* 
 	 * MySQL connection
 	 */
-	$gaSql['link'] =  mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password']  ) or
-		die( 'Could not open connection to server' );
-	
-	mysql_select_db( $gaSql['db'], $gaSql['link'] ) or 
-		die( 'Could not select database '. $gaSql['db'] );
+	if ( ! $gaSql['link'] = mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password']  ) )
+	{
+		fatal_error( 'Could not open connection to server' );
+	}
+
+	if ( ! mysql_select_db( $gaSql['db'], $gaSql['link'] ) )
+	{
+		fatal_error( 'Could not select database ' );
+	}
 	
 	
 	/* 
@@ -87,7 +101,10 @@
 		$sWhere = "WHERE (";
 		for ( $i=0 ; $i<count($aColumns) ; $i++ )
 		{
-			$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
+			if ( isset($_GET['bSearchable_'.$i]) && $_GET['bSearchable_'.$i] == "true" )
+			{
+				$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
+			}
 		}
 		$sWhere = substr_replace( $sWhere, "", -3 );
 		$sWhere .= ')';
@@ -123,13 +140,13 @@
 		$sOrder
 		$sLimit
 	";
-	$rResult = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
+	$rResult = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
 	
 	/* Data set length after filtering */
 	$sQuery = "
 		SELECT FOUND_ROWS()
 	";
-	$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
+	$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
 	$aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
 	$iFilteredTotal = $aResultFilterTotal[0];
 	
@@ -138,7 +155,7 @@
 		SELECT COUNT(".$sIndexColumn.")
 		FROM   $sTable
 	";
-	$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
+	$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
 	$aResultTotal = mysql_fetch_array($rResultTotal);
 	$iTotal = $aResultTotal[0];
 	

examples/server_side/scripts/objects_jsonp.php

@@ -1,28 +1,4 @@
 <?php
-	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
-	 * Readme...
-	 * 
-	 * This script is basically the same as the server_processing.php script, but with a couple of
-	 * modifications to show how column reordering can be handled by DataTables. This is in two
-	 * parts:
-	 * 
-	 *   1. Data from server to client - notice that the $aColumns array below is in a different
-	 * order to that from the array in server_processing.php, but DataTables will render the
-	 * table in the same order. This reordering is done on the client-side by using the sColumns 
-	 * parameter which is passed back, stating the order which the server is sending data back in.
-	 * DataTables will compaire this to the sName parameter for each column and reorder as needed.
-	 * 
-	 *   2. Data from client to server - in order that the columns can be sent to the server in
-	 * any order (it is expected in this script that the server-side will always work with a static
-	 * array which is not reordered dynamically) DataTables will send the parameter 'sColumns' which
-	 * like it's return counterpart is a comma seperated list of the column names, telling the
-	 * server-side what order the columns are being shown on the client-side. As such it is now
-	 * possible to realise what column sSearch_{i} (for example) refers to. This is done by a look
-	 * up of the aColumns array from the names sent in. Note that I've used the same names for the
-	 * db table columns and the html table columns to make things a little clearer, but this is not
-	 * required.
-	 */
-	
 	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 	 * Easy set variables
 	 */
@@ -30,7 +6,7 @@
 	/* Array of database columns which should be read and sent back to DataTables. Use a space where
 	 * you want to insert a non-database field (for example a counter or static image)
 	 */
-	$aColumns = array( 'browser', 'platform', 'version', 'grade', 'engine' );
+	$aColumns = array( 'engine', 'browser', 'platform', 'version', 'grade' );
 	
 	/* Indexed column (used for fast and accurate table cardinality) */
 	$sIndexColumn = "id";
@@ -53,20 +29,28 @@
 	 * no need to edit below this line
 	 */
 	
+	/* 
+	 * Local functions
+	 */
+	function fatal_error ( $sErrorMessage = '' )
+	{
+		header( $_SERVER['SERVER_PROTOCOL'] .' 500 Internal Server Error' );
+		die( $sErrorMessage );
+	}
+
+	
 	/* 
 	 * MySQL connection
 	 */
-	$gaSql['link'] =  mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password']  ) or
-		die( 'Could not open connection to server' );
-	
-	mysql_select_db( $gaSql['db'], $gaSql['link'] ) or 
-		die( 'Could not select database '. $gaSql['db'] );
-	
-	
-	/*
-	 * Names - this is specific to server-side column re-ordering
-	 */
-	$aNames = explode( ',', $_GET['sColumns'] );
+	if ( ! $gaSql['link'] = mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password']  ) )
+	{
+		fatal_error( 'Could not open connection to server' );
+	}
+
+	if ( ! mysql_select_db( $gaSql['db'], $gaSql['link'] ) )
+	{
+		fatal_error( 'Could not select database ' );
+	}
 	
 	
 	/* 
@@ -83,6 +67,7 @@
 	/*
 	 * Ordering
 	 */
+	$sOrder = "";
 	if ( isset( $_GET['iSortCol_0'] ) )
 	{
 		$sOrder = "ORDER BY  ";
@@ -90,7 +75,7 @@
 		{
 			if ( $_GET[ 'bSortable_'.intval($_GET['iSortCol_'.$i]) ] == "true" )
 			{
-				$iColumnIndex = array_search( $aNames[intval( $_GET['iSortCol_'.$i] )], $aColumns );
+				$iColumnIndex = array_search( $_GET['mDataProp_'.$_GET['iSortCol_'.$i]], $aColumns );
 				$sOrder .= $aColumns[ $iColumnIndex ]."
 				 	".mysql_real_escape_string( $_GET['sSortDir_'.$i] ) .", ";
 			}
@@ -111,12 +96,15 @@
 	 * on very large tables, and MySQL's regex functionality is very limited
 	 */
 	$sWhere = "";
-	if ( $_GET['sSearch'] != "" )
+	if ( isset($_GET['sSearch']) && $_GET['sSearch'] != "" )
 	{
 		$sWhere = "WHERE (";
 		for ( $i=0 ; $i<count($aColumns) ; $i++ )
 		{
-			$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
+			if ( isset($_GET['bSearchable_'.$i]) && $_GET['bSearchable_'.$i] == "true" )
+			{
+				$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
+			}
 		}
 		$sWhere = substr_replace( $sWhere, "", -3 );
 		$sWhere .= ')';
@@ -125,7 +113,7 @@
 	/* Individual column filtering */
 	for ( $i=0 ; $i<count($aColumns) ; $i++ )
 	{
-		if ( $_GET['bSearchable_'.$i] == "true" && $_GET['sSearch_'.$i] != '' )
+		if ( isset($_GET['bSearchable_'.$i]) && $_GET['bSearchable_'.$i] == "true" && $_GET['sSearch_'.$i] != '' )
 		{
 			if ( $sWhere == "" )
 			{
@@ -135,7 +123,7 @@
 			{
 				$sWhere .= " AND ";
 			}
-			$iColumnIndex = array_search( $aNames[$i], $aColumns );
+			$iColumnIndex = array_search( $_GET['mDataProp_'.$i], $aColumns );
 			$sWhere .= $aColumns[$iColumnIndex]." LIKE '%".mysql_real_escape_string($_GET['sSearch_'.$i])."%' ";
 		}
 	}
@@ -152,13 +140,13 @@
 		$sOrder
 		$sLimit
 	";
-	$rResult = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
+	$rResult = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
 	
 	/* Data set length after filtering */
 	$sQuery = "
 		SELECT FOUND_ROWS()
 	";
-	$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
+	$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
 	$aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
 	$iFilteredTotal = $aResultFilterTotal[0];
 	
@@ -167,7 +155,7 @@
 		SELECT COUNT(".$sIndexColumn.")
 		FROM   $sTable
 	";
-	$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
+	$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
 	$aResultTotal = mysql_fetch_array($rResultTotal);
 	$iTotal = $aResultTotal[0];
 	
@@ -177,7 +165,6 @@
 	 */
 	$output = array(
 		"sEcho" => intval($_GET['sEcho']),
-		"sColumns" => implode( ',', $aColumns ),
 		"iTotalRecords" => $iTotal,
 		"iTotalDisplayRecords" => $iFilteredTotal,
 		"aaData" => array()
@@ -191,16 +178,16 @@
 			if ( $aColumns[$i] == "version" )
 			{
 				/* Special output formatting for 'version' column */
-				$row[] = ($aRow[ $aColumns[$i] ]=="0") ? '-' : $aRow[ $aColumns[$i] ];
+				$row[ $aColumns[$i] ] = ($aRow[ $aColumns[$i] ]=="0") ? '-' : $aRow[ $aColumns[$i] ];
 			}
 			else if ( $aColumns[$i] != ' ' )
 			{
 				/* General output */
-				$row[] = $aRow[ $aColumns[$i] ];
+				$row[ $aColumns[$i] ] = $aRow[ $aColumns[$i] ];
 			}
 		}
 		$output['aaData'][] = $row;
 	}
 	
-	echo json_encode( $output );
+	echo $_GET['callback'].'('.json_encode( $output ).');';
 ?>

examples/server_side/scripts/post.php

@@ -29,14 +29,28 @@
 	 * no need to edit below this line
 	 */
 	
+	/* 
+	 * Local functions
+	 */
+	function fatal_error ( $sErrorMessage = '' )
+	{
+		header( $_SERVER['SERVER_PROTOCOL'] .' 500 Internal Server Error' );
+		die( $sErrorMessage );
+	}
+
+	
 	/* 
 	 * MySQL connection
 	 */
-	$gaSql['link'] =  mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password']  ) or
-		die( 'Could not open connection to server' );
-	
-	mysql_select_db( $gaSql['db'], $gaSql['link'] ) or 
-		die( 'Could not select database '. $gaSql['db'] );
+	if ( ! $gaSql['link'] = mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password']  ) )
+	{
+		fatal_error( 'Could not open connection to server' );
+	}
+
+	if ( ! mysql_select_db( $gaSql['db'], $gaSql['link'] ) )
+	{
+		fatal_error( 'Could not select database ' );
+	}
 	
 	
 	/* 
@@ -85,7 +99,10 @@
 		$sWhere = "WHERE (";
 		for ( $i=0 ; $i<count($aColumns) ; $i++ )
 		{
-			$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string( $_POST['sSearch'] )."%' OR ";
+			if ( isset($_POST['bSearchable_'.$i]) && $_POST['bSearchable_'.$i] == "true" )
+			{
+				$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string( $_POST['sSearch'] )."%' OR ";
+			}
 		}
 		$sWhere = substr_replace( $sWhere, "", -3 );
 		$sWhere .= ')';
@@ -120,13 +137,13 @@
 		$sOrder
 		$sLimit
 	";
-	$rResult = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
+	$rResult = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
 	
 	/* Data set length after filtering */
 	$sQuery = "
 		SELECT FOUND_ROWS()
 	";
-	$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
+	$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
 	$aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
 	$iFilteredTotal = $aResultFilterTotal[0];
 	
@@ -135,7 +152,7 @@
 		SELECT COUNT(".$sIndexColumn.")
 		FROM   $sTable
 	";
-	$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
+	$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
 	$aResultTotal = mysql_fetch_array($rResultTotal);
 	$iTotal = $aResultTotal[0];
 	

examples/server_side/scripts/server_processing.php

@@ -29,24 +29,37 @@
 	 * no need to edit below this line
 	 */
 	
+	/* 
+	 * Local functions
+	 */
+	function fatal_error ( $sErrorMessage = '' )
+	{
+		header( $_SERVER['SERVER_PROTOCOL'] .' 500 Internal Server Error' );
+		die( $sErrorMessage );
+	}
+
+	
 	/* 
 	 * MySQL connection
 	 */
-	$gaSql['link'] =  mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password']  ) or
-		die( 'Could not open connection to server' );
-	
-	mysql_select_db( $gaSql['db'], $gaSql['link'] ) or 
-		die( 'Could not select database '. $gaSql['db'] );
-	
-	
+	if ( ! $gaSql['link'] = mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password']  ) )
+	{
+		fatal_error( 'Could not open connection to server' );
+	}
+
+	if ( ! mysql_select_db( $gaSql['db'], $gaSql['link'] ) )
+	{
+		fatal_error( 'Could not select database ' );
+	}
+
 	/* 
 	 * Paging
 	 */
 	$sLimit = "";
 	if ( isset( $_GET['iDisplayStart'] ) && $_GET['iDisplayLength'] != '-1' )
 	{
-		$sLimit = "LIMIT ".mysql_real_escape_string( $_GET['iDisplayStart'] ).", ".
-			mysql_real_escape_string( $_GET['iDisplayLength'] );
+		$sLimit = "LIMIT ".intval( $_GET['iDisplayStart'] ).", ".
+			intval( $_GET['iDisplayLength'] );
 	}
 	
 	
@@ -61,8 +74,8 @@
 		{
 			if ( $_GET[ 'bSortable_'.intval($_GET['iSortCol_'.$i]) ] == "true" )
 			{
-				$sOrder .= $aColumns[ intval( $_GET['iSortCol_'.$i] ) ]."
-				 	".mysql_real_escape_string( $_GET['sSortDir_'.$i] ) .", ";
+				$sOrder .= "`".$aColumns[ intval( $_GET['iSortCol_'.$i] ) ]."` ".
+				 	mysql_real_escape_string( $_GET['sSortDir_'.$i] ) .", ";
 			}
 		}
 		
@@ -86,7 +99,10 @@
 		$sWhere = "WHERE (";
 		for ( $i=0 ; $i<count($aColumns) ; $i++ )
 		{
-			$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
+			if ( isset($_GET['bSearchable_'.$i]) && $_GET['bSearchable_'.$i] == "true" )
+			{
+				$sWhere .= "`".$aColumns[$i]."` LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
+			}
 		}
 		$sWhere = substr_replace( $sWhere, "", -3 );
 		$sWhere .= ')';
@@ -105,7 +121,7 @@
 			{
 				$sWhere .= " AND ";
 			}
-			$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string($_GET['sSearch_'.$i])."%' ";
+			$sWhere .= "`".$aColumns[$i]."` LIKE '%".mysql_real_escape_string($_GET['sSearch_'.$i])."%' ";
 		}
 	}
 	
@@ -115,28 +131,28 @@
 	 * Get data to display
 	 */
 	$sQuery = "
-		SELECT SQL_CALC_FOUND_ROWS ".str_replace(" , ", " ", implode(", ", $aColumns))."
+		SELECT SQL_CALC_FOUND_ROWS `".str_replace(" , ", " ", implode("`, `", $aColumns))."`
 		FROM   $sTable
 		$sWhere
 		$sOrder
 		$sLimit
-	";
-	$rResult = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
+		";
+	$rResult = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
 	
 	/* Data set length after filtering */
 	$sQuery = "
 		SELECT FOUND_ROWS()
 	";
-	$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
+	$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
 	$aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
 	$iFilteredTotal = $aResultFilterTotal[0];
 	
 	/* Total data set length */
 	$sQuery = "
-		SELECT COUNT(".$sIndexColumn.")
+		SELECT COUNT(`".$sIndexColumn."`)
 		FROM   $sTable
 	";
-	$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
+	$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
 	$aResultTotal = mysql_fetch_array($rResultTotal);
 	$iTotal = $aResultTotal[0];
 	

examples/server_side/select_rows.html

@@ -24,7 +24,6 @@ $(document).ready(function() {
 			if ( jQuery.inArray(aData.DT_RowId, aSelected) !== -1 ) {
 				$(nRow).addClass('row_selected');
 			}
-			return nRow;
 		}
 	});
 	
@@ -85,7 +84,7 @@ $(document).ready(function() {
 			
 			
 			<h1>Initialisation code</h1>
-			<pre>$(document).ready(function() {
+			<pre class="brush: js;">$(document).ready(function() {
 	var aSelected = [];
 	
 	/* Init the table */
@@ -97,7 +96,6 @@ $(document).ready(function() {
 			if ( jQuery.inArray(aData.DT_RowId, aSelected) !== -1 ) {
 				$(nRow).addClass('row_selected');
 			}
-			return nRow;
 		}
 	});
 	
@@ -115,6 +113,14 @@ $(document).ready(function() {
 		$(this).toggleClass('row_selected');
 	} );
 } );</pre>
+			<style type="text/css">
+				@import "../examples_support/syntax/css/shCore.css";
+			</style>
+			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+
+			<h1>Server response</h1>
+			<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
+			<pre id="latest_xhr" class="brush: js;"></pre>
 			
 			
 			<h1>Other examples</h1>
@@ -129,6 +135,7 @@ $(document).ready(function() {
 					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
+					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 					<li><a href="../basic_init/state_save.html">State saving</a></li>
 					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 					<li>Scrolling: <br>
@@ -147,7 +154,7 @@ $(document).ready(function() {
 					<li>Events: <br>
 						<a href="../advanced_init/events_live.html">Live events</a> / 
 						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init with fnGetNodes</a>
+						<a href="../advanced_init/events_post_init.html">Post-init</a>
 					</li>
 					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
@@ -161,6 +168,9 @@ $(document).ready(function() {
 					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
+					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
+					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
+					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 				</ul>
 				
 				<h2>API</h2>
@@ -203,7 +213,6 @@ $(document).ready(function() {
 					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
 					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 				</ul>