How can I force the jQuery Datatables header sort

问题:

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?

回答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.

回答2:

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.

回答3:

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.

回答4:

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/

回答5:

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; }

回答6:

As an alternative to the answers above, I used the following (based on the earlier insight). The benefit for me is that no additional padding is added on the right, which is helpful for columns that do not have a sort icon. (DataTables still assigns the DataTable_sort_wrapper class).

table.dataTable th>div.DataTables_sort_wrapper {
  position: relative;
  white-space: nowrap;
}
table.dataTable th > div.DataTables_sort_wrapper > span.DataTables_sort_icon.css_right {
  display: inline-block;
  position: absolute;
  right: 0px;
  vertical-align: top;
}

回答7:

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;
}