From bd992cb10aeff28831e959a3335c3cb874b5a2c9 Mon Sep 17 00:00:00 2001
From: Allan Jardine <allan.jardine@sprymedia.co.uk>
Date: Fri, 3 Sep 2010 08:33:44 +0100
Subject: [PATCH] New: When using jQuery UI theme option, DataTables will wrap
 the contents of sortable TH element in a DIV which can then be used to
 position the sorting arrow accurately across all columns. The required CSS
 has been added to the CSS files to show this effect.

---
 examples/basic_init/dom.html                  |  4 +-
 media/css/demo_table_jui.css                  | 19 +++++++++
 media/js/jquery.dataTables.js                 | 15 +++++--
 .../tests_onhold/1_dom/bJQueryUI.js           | 40 +++++++++++++++++++
 4 files changed, 73 insertions(+), 5 deletions(-)
 create mode 100755 media/unit_testing/tests_onhold/1_dom/bJQueryUI.js

diff --git a/examples/basic_init/dom.html b/examples/basic_init/dom.html
index 2a3fc400..807231ce 100644
--- a/examples/basic_init/dom.html
+++ b/examples/basic_init/dom.html
@@ -14,7 +14,7 @@
 		<script type="text/javascript" charset="utf-8">
 			$(document).ready(function() {
 				$('#example').dataTable( {
-					"sDom": '<"top"i>rt<"bottom"flp<"clear">'
+					"sDom": '<"top"i>rt<"bottom"flp><"clear">'
 				} );
 			} );
 		</script>
@@ -477,7 +477,7 @@
 			<h1>Initialisation code</h1>
 			<pre>$(document).ready(function() {
 	$('#example').dataTable( {
-		"sDom": '<"top"i>rt<"bottom"flp<"clear">'
+		"sDom": '&lt;"top"i&gt;rt&lt;"bottom"flp&gt;&lt;"clear"&gt;'
 	} );
 } );</pre>
 			
diff --git a/media/css/demo_table_jui.css b/media/css/demo_table_jui.css
index 1f386cc7..28d28621 100644
--- a/media/css/demo_table_jui.css
+++ b/media/css/demo_table_jui.css
@@ -71,6 +71,25 @@ table.display thead th {
 }
 
 
+/*
+ * Sort arrow icon positioning
+ */
+table.display thead th div.DataTables_sort_wrapper {
+	position: relative;
+	padding-right: 20px;
+	padding-right: 20px;
+}
+
+table.display thead th div.DataTables_sort_wrapper span {
+	position: absolute;
+	top: 50%;
+	margin-top: -8px;
+	right: 0;
+}
+
+
+
+
 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  *
  * Everything below this line is the same as demo_table.css. This file is
diff --git a/media/js/jquery.dataTables.js b/media/js/jquery.dataTables.js
index 5ed05817..39e26891 100644
--- a/media/js/jquery.dataTables.js
+++ b/media/js/jquery.dataTables.js
@@ -185,6 +185,7 @@
 		"sSortJUI": "",
 		"sSortJUIAscAllowed": "",
 		"sSortJUIDescAllowed": "",
+		"sSortJUIWrapper": "",
 		
 		/* Scrolling */
 		"sScrollWrapper": "dataTables_scroll",
@@ -250,6 +251,7 @@
 		"sSortJUI": "css_right ui-icon ui-icon-carat-2-n-s",
 		"sSortJUIAscAllowed": "css_right ui-icon ui-icon-carat-1-n",
 		"sSortJUIDescAllowed": "css_right ui-icon ui-icon-carat-1-s",
+		"sSortJUIWrapper": "DataTables_sort_wrapper",
 		
 		/* Scrolling */
 		"sScrollWrapper": "dataTables_scroll",
@@ -2702,7 +2704,7 @@
 		 */
 		function _fnDrawHead( oSettings )
 		{
-			var i, nTh, iLen;
+			var i, nTh, iLen, j, jLen;
 			var iThs = oSettings.nTHead.getElementsByTagName('th').length;
 			var iCorrector = 0;
 			
@@ -2768,8 +2770,15 @@
 			{
 				for ( i=0, iLen=oSettings.aoColumns.length ; i<iLen ; i++ )
 				{
-					oSettings.aoColumns[i].nTh.insertBefore( document.createElement('span'),
-						oSettings.aoColumns[i].nTh.firstChild );
+					/* xxx */
+					nTh = oSettings.aoColumns[i].nTh;
+					
+					var nDiv = document.createElement('div');
+					nDiv.className = oSettings.oClasses.sSortJUIWrapper
+					$(nTh).contents().appendTo(nDiv);
+					
+					nDiv.appendChild( document.createElement('span') );
+					nTh.appendChild( nDiv );
 				}
 			}
 			
diff --git a/media/unit_testing/tests_onhold/1_dom/bJQueryUI.js b/media/unit_testing/tests_onhold/1_dom/bJQueryUI.js
new file mode 100755
index 00000000..6c685468
--- /dev/null
+++ b/media/unit_testing/tests_onhold/1_dom/bJQueryUI.js
@@ -0,0 +1,40 @@
+// DATA_TEMPLATE: dom_data
+oTest.fnStart( "bJQueryUI" );
+
+$(document).ready( function () {
+	$('#example').dataTable( {
+		"bJQueryUI": true
+	} );
+	
+	oTest.fnTest( 
+		"Header elements are fully wrapped by DIVs",
+		null,
+		function () {
+			var test = true;
+			$('#example thead th').each( function () {
+				if ( this.childNodes > 1 ) {
+					test = false;
+				}
+			} );
+			return test;
+		}
+	);
+	
+	oTest.fnTest( 
+		"One div for each header element",
+		null,
+		function () {
+			return $('#example thead th div').length == 5;
+		}
+	);
+	
+	oTest.fnTest( 
+		"One span for each header element, nested as child of div",
+		null,
+		function () {
+			return $('#example thead th div>span').length == 5;
+		}
+	);
+	
+	oTest.fnComplete();
+} );
\ No newline at end of file