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

@@ -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>
 			

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

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 );
 				}
 			}
 			

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();
+} );