CODEWITHSUNDEEP
javascriptjquerycsstablesorter
GingerHead
GingerHead

Reputation: 8230

TableSorter: How can I change the position of sorting arrows

I'm implementing jquery's tablesorter. I need to change the sorting arrows position with respect to the title of the column.

Here is what I've 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 the others where they overlap the title or go far to the right.
Is there a way to keep the arrows always show very next to the column title?

Upvotes: 4

Views: 11739

Answers (4)

WillHaslett
WillHaslett

Reputation: 738

The accepted answer did not work for me. To keep the sorting arrows just to the left of the table header 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;
}

Upvotes: 2

Ilia Ross
Ilia Ross

Reputation: 13412

As of the latest dataTables v.1.10.4 (on Dec 8 2014), they changed the name of the classes. In case you wish to put the sorting arrows on the left of the column title, the following CSS should be used get 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;
}​

Upvotes: 4

Mottie
Mottie

Reputation: 86443

If you are using the default blue theme, all you need to do is change the background position of the arrows then add left padding to move the text away from it - demo

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

Upvotes: 9

Morten Jacobsen
Morten Jacobsen

Reputation: 986

You could add a span after the column name where you change the class.. Like:

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

This question seems to be similar and provides a solution akin to the above: jquery tablesorter CSS arrow icons

Upvotes: 2

Related Questions