TableSorter: How to Change Arrow Sort Position

Question

I am implementing jquery tablesorter. I need to change the sorting position with respect to the column heading.

Here is what I have done so far:

table.tablesorter thead tr .header { background-image: url(bg.gif); background-repeat: no-repeat; background-position: 80% 70%; cursor: pointer; } 

This works fine for a column, but not for others where they overlap the heading or go far to the right.
Is there a way for the arrows to always appear next to the column heading?

Answer 1

If you use the default blue theme, all you have to do is change the position of the arrow background and then add a left pad to move the text away from it - demo

 table.tablesorter thead tr .header { background-position: left center; padding-left: 20px; }​ 

Answer 2

Starting with the latest dataTables v.1.10.4 (December 8, 2014), they changed the name of the classes. If you want to place the sorting arrows to the left of the column heading, you should use the following CSS: desired result:

 table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled { background-position: left center; padding-left: 20px; }​ 

Answer 3

You can add a range after the name of the column in which you are changing the class. For instance:

 <tr>Column 1 <span class="sort-arrow" /></tr> 

This question seems similar and provides a solution similar to the above: jquery tablesorter Icons arrow arrow

Answer 4

The accepted answer did not help me. To save the sort arrows only to the left of the table title text, this worked:

 .tablesorter-header { display: table-cell !important; vertical-align: middle !important; background-position: left center !important; padding-left: 20px; } .tablesorter-header-inner{ padding-left: 25px; }