Sort icon next to column name

Mir

As my table columns are wide, the sort icon is appearing at the end of header name. Is there an option to keep them right next to column name?

tangerine

Allan posted a solution.

http://www.datatables.net/forums/discussion/25819/place-sort-icon-to-immediate-right-of-label

Mir

Thanks much tangerine. This is exactly what I am looking for. However I am getting this error saying

 Uncaught TypeError: table.columns is not a function

I am not sure if that is removed from newer version of datatables. Any thoughts?

Mir

Oh! That error was due to using the code on dataTable() instead of DataTable().

Mir

Strange! While the table on which the solution is applied has contents directly in <th>, my table has got a wrapper div inside <th>, as such its not appearing as expected.

<th> on which solution is appled:

<th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style="width: 46px;">Name<span class="sort-icon"></span></th>

As I dont have access to my table right now, will show my <th> element later. However it looks something like this

<th...>
<div....>
Name
<span...></span>
</div...>
<span class="sort-icon">
</th>

Any reason for such behavior?

allan

Sounds like you might be using jQuery UI integration perhaps? It has to add extra markup due to the limitations of jQuery UI.

Allan

Mir

Oh yeah! I am using jQuery UI integration. Could you please help me with a clue to add the extra markups?

Mir

Following your way, did some work around and got it working. Not sure if such a fix is recommended in my case. Wondering if there is a better approach in my case where I am using jQuery UI Integration.

Here is what I am doing:

    // To bring sort icon next to column name.
    myTable.api().columns().iterator( 'column', function (ctx, idx) {
            var th =  $( myTable.api().column(idx).header());
             var classNames = th.attr("class").toString().split(' ');
             $.each(classNames, function (i, className) {
                 if(className == 'sorting'){
                     var div = th.find( "div" );
                     var span = div.find("span");
                     if(span != null){
                         span.remove();
                     }
                     div.append( '<img src="images/icon-sort.png">');
                 }
                 // breaking the inner loop
                 return false;
             });
          } );

allan

It should actually work by default (example). However, I am rewriting that part at the moment and will ensure that it works in future.

Allan