jqGrid place sort arrow icon on the left - sorting

Question

How i can place sort arrow icon on the left in filter headers?
I see the problem as the implementation because arrows container (s-ico) is inside the container header (ui-jqgrid-sortable) ...
<div id="jqgh_mylist_pDate" class="ui-jqgrid-sortable">
Date
<span class="s-ico">
<span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr"></span>
<span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-icon ui-icon-triangle-1-s ui-sort-ltr"></span>
</span>
</div>

Answer 1

A long time i try to find answer to my question and made my own solution
Difference between sortable and not sortable columns only in style in first span tag - display:none
In begin i tried to detect sortable columns by use :hidden selector, but all columns have only blank spans and this selector return true for both type of columns
<!-- sortable -->
<div id="jqgh_manager" class="ui-jqgrid-sortable">
Manager
<span class="s-ico">
<span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr"></span>
<span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"></span>
</span>
</div>
<!-- not sortable -->
<div id="jqgh_operator" class="ui-jqgrid-sortable">
Operator
<span class="s-ico" style="display:none">
<span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr"></span>
<span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"></span>
</span>
</div>
so, we can check rule of style for span tag
// Moving the arrows of sorting to the left side
jQuery.jgrid.extend({
moveSortArrows: function (){
// Moving only sorted cols
// We must check style rule, because we can not use :hidden selector since this selector
// return true if width and height equal 0
// For more information see official documentations - http://api.jquery.com/hidden-selector/
$('.ui-jqgrid-sortable:has(span.s-ico:not([style*="display:none"]))').each(
function() {
// Add left padding for moving arrows
$(this).css('padding-left', '16px');
// Moving arrows
$(this).find('span.s-ico').css({
"position": "absolute",
"left": 0
});
}
);
}
});