Sort icon next to column name

Sort icon next to column name

MirMir Posts: 27Questions: 7Answers: 1

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?

This question has accepted answers - jump to:

Answers

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394
    Answer ✓
  • MirMir Posts: 27Questions: 7Answers: 1
    edited April 2015

    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?

  • MirMir Posts: 27Questions: 7Answers: 1
    Answer ✓

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

  • MirMir Posts: 27Questions: 7Answers: 1
    edited May 2015

    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?

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Allan

  • MirMir Posts: 27Questions: 7Answers: 1

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

  • MirMir Posts: 27Questions: 7Answers: 1
    edited May 2015

    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;
                 });
              } );
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    edited May 2015

    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

This discussion has been closed.