Using jQuery UI themes Sort icon appears on New line after header text

It looks like there are a several solutions to this posted over the years in the forums here, but none seemed to be a absolute fix-all solution. However, after trying lots of different things I found a work around that seemed to work for most major browsers (including older versions of IE) and I thought I would post my solution since it was a very annoying bug. Maybe the developers can explain WHY it works and possibly implement this in an update and hopefully this will help someone else out in the future.

I first added this to my css:

.DataTables_sort_wrapper { white-space: nowrap; }

This worked on some browsers but not all (Firefox was still wonky).

In jquery.dataTables.js version 1.9.4 line 1080 is this section of code:

 
           /* Add the extra markup needed by jQuery UI's themes */
            if (oSettings.bJUI) {
                for (i = 0, iLen = oSettings.aoColumns.length; i < iLen; i++) {
                    nTh = oSettings.aoColumns[i].nTh;

                    var nDiv = document.createElement('div');
                    nDiv.className = oSettings.oClasses.sSortJUIWrapper;
                    $(nTh).contents().appendTo(nDiv); /* <----- MOVE THIS LINE */

                    var nSpan = document.createElement('span');
                    nSpan.className = oSettings.oClasses.sSortIcon;
                    nDiv.appendChild(nSpan);
                    nTh.appendChild(nDiv);
                }
            }

I simply changed the line $(nTh).contents().appendTo(nDiv); to follow nDiv.appendChild(nSpan); Like this:

 
           /* Add the extra markup needed by jQuery UI's themes */
            if (oSettings.bJUI) {
                for (i = 0, iLen = oSettings.aoColumns.length; i < iLen; i++) {
                    nTh = oSettings.aoColumns[i].nTh;

                    var nDiv = document.createElement('div');
                    nDiv.className = oSettings.oClasses.sSortJUIWrapper;

                    var nSpan = document.createElement('span');
                    nSpan.className = oSettings.oClasses.sSortIcon;
                    nDiv.appendChild(nSpan);

                    $(nTh).contents().appendTo(nDiv); /* <-----MOVE THIS LINE TO HERE */

                    nTh.appendChild(nDiv);
                }
            }

What this is doing is building the div element, appending the span element, THEN adding the contents/text of the header in that order. For some reason adding the text before appending the span element renders the markup of the span element on a new line.

Implementing these changes seemed to fix the problem in Chrome, IE7+, and Firefox. Hope this helps!