How can I force the jQuery Datatables header sort

Question

The Datatables sort icon, on column headers, by default appears under the column header text. I'd like to have this appear on the same line and on the far right side or far left side of the header cell.

Here's how the HTML for one of the column headers appears (in Firebug).

<th class="ui-state-default" rowspan="1" colspan="1" style="width: 252px;">
    <div class="DataTables_sort_wrapper" style="text-align: left;">
        Account Name
        <span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"></span>
    </div>
</th>

I added display: inline-block; to the css-right class on the <span> to force it to appear on the same line as mentioned here and here. However, I still can't find how to force the icon to appear on the far right or the far left. Adding float:left; or float:right; bumps the icon to the next line.

Any ideas?

Answer 1

I don't know if this is the best way, but here's what I see in my jQuery-UI DataTable for that symbol:

From the site's main stylesheet (not part of the jQuery UI stylesheet):

.display thead th .DataTables_sort_wrapper span { float: right; }

From the jQuery UI CSS file:

.ui-icon { 
  display: block; 
  // ... some other stuff including overflow: hidden 
}

There are some other styles of course, but I think those are the ones that matter. Based on your question, I'm surprised it's not already working for you.

Answer 2

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 !important;
    background-repeat: no-repeat;
}

Answer 3

For me table.display did not exist, I added the following:

table.dataTable thead th div.DataTables_sort_wrapper {
    position: relative;
    padding-right: 20px;
}

table.dataTable thead th div.DataTables_sort_wrapper span {
    position: absolute;
    top: 50%;
    margin-top: -8px;
    right: 0;
}

The above worked for me.

Answer 4

For the latest version of Datatables(as of 31 march 15). inside the datatables CSS change the following-

table.table thead .sorting,
table.table thead .sorting_asc,
table.table thead .sorting_desc,
table.table thead .sorting_asc_disabled,
table.table thead .sorting_desc_disabled {

    cursor: pointer;
    *cursor: hand;
    background-position: left center;
    padding-left: 20px;
}

table.table thead .sorting { background: url('../img/sort_both.png') no-repeat center left; }
table.table thead .sorting_asc { background: url('../img/sort_asc.png') no-repeat center left; }
table.table thead .sorting_desc { background: url('../img/sort_desc.png') no-repeat center left; }

Answer 5

Though Greg's answer lead me to the solution (and is the answer I accepted), for clarity, and as a help to others that might run into this issue, I'm adding my own answer.

What most affects the positioning of the sort icons is this default DataTables CSS:

table.display thead th div.DataTables_sort_wrapper {
    padding-right: 20px;
    position: relative;
}

table.display thead th div.DataTables_sort_wrapper span {
    margin-top: -8px;
    position: absolute;
    right: 0;
    top: 50%;
}

If the class="display" attribute is not on the table, the CSS above is not applied.

Answer 6

The problem being, Datatables [often] places the sort button under the text.

The OP specifically wanted the button on the right or the left of the text; however, Steve Teale of http://britseyeview.com/ has a solution which moves the sort buttons up above the text and to the top-right of the cell. Meaning, the sort button is always top-right, but sometimes over the text. Basically he resets the original CSS.

Steve writes: If I use the out-of-box background styles that implement these [sort buttons], they appear behind the column name, so instead I used:

.sorting_asc {
  padding-right:18px;
  cursor: pointer;
  background: url('sort_asc.png') no-repeat top right;
}

.sorting_desc {
  padding-right:18px;
  cursor: pointer;
  background: url('sort_desc.png') no-repeat top right;
}

.sorting {
  padding-right:18px;
  cursor: pointer;
  background: url('sort_both.png') no-repeat top right;
}

.sorting_asc_disabled {
  padding-right:18px;
  cursor: pointer;
  background: url('sort_asc_disabled.png') no-repeat top right;
}

.sorting_desc_disabled {
  padding-right:18px;
  cursor: pointer;
  background: url('sort_desc_disabled.png') no-repeat top right;
}

You will need to add your path to the "background: url('/your/path/sort_both.png')".

Steve's "Getting Started with Datatables" is here: http://britseyeview.com/software/dtgs/