Làm cách nào tôi có thể buộc biểu tượng sắp xếp tiêu đề của Biểu dữ liệu jQuery ở phía xa bên phải hoặc bên trái của ô?

Question

Biểu tượng sắp xếp Datatables, trên tiêu đề cột, theo mặc định sẽ xuất hiện bên dưới văn bản tiêu đề cột. Tôi muốn có điều này xuất hiện trên cùng một dòng và ở phía bên phải hoặc phía xa bên trái của ô tiêu đề.

Dưới đây là cách HTML cho một trong các tiêu đề cột xuất hiện (trong 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> 

tôi thêm display: inline-block; đến lớp css-right trên <span> để buộc nó xuất hiện trên cùng một dòng như đã đề cập here và here. Tuy nhiên, tôi vẫn không thể tìm thấy làm thế nào để buộc các biểu tượng xuất hiện trên bên phải hoặc xa bên trái. Thêm float:left; hoặc float:right; chạm biểu tượng vào dòng tiếp theo.

Bất kỳ ý tưởng nào?

Answer 1

Tôi không biết nếu điều này là cách tốt nhất, nhưng đây là những gì tôi nhìn thấy trong jQuery-UI DataTable của tôi cho biểu tượng đó:

Từ stylesheet chính của trang web (không nằm trong stylesheet jQuery UI):

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

Từ jQuery UI CSS file:

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

có một số phong cách khác tất nhiên, nhưng tôi nghĩ rằng đó là những người thân chuyện đó. Dựa trên câu hỏi của bạn, tôi ngạc nhiên là nó chưa hoạt động cho bạn.

Answer 2

Mặc dù câu trả lời của Greg đưa tôi đến giải pháp (và là câu trả lời tôi chấp nhận), để rõ ràng và giúp đỡ những người khác có thể gặp phải vấn đề này, tôi đang thêm câu trả lời của riêng mình.

gì ảnh hưởng đến hầu hết các vị trí của các biểu tượng phân loại là thế này DataTables mặc định 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%; 
} 

Nếu thuộc tính class="display" không phải là trên bàn, CSS trên không áp dụng.

Answer 3

Đối với tôi table.display không tồn tại, tôi đã thêm như sau:

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

Trên đây làm việc cho tôi.

Answer 4

Sự cố xảy ra, Biểu dữ liệu [thường] đặt nút sắp xếp bên dưới văn bản.

OP đặc biệt muốn nút ở bên phải hoặc bên trái của văn bản; Tuy nhiên, , Steve Teale của http://britseyeview.com/ có giải pháp di chuyển các nút sắp xếp phía trên văn bản và ở trên cùng bên phải của ô. Có nghĩa là, nút sắp xếp luôn ở trên cùng bên phải, nhưng đôi khi trên văn bản. Về cơ bản, ông đặt lại CSS ban đầu.

Steve viết: Nếu tôi sử dụng phong cách out-of-box nền mà thực hiện những [nút phân loại], chúng xuất hiện phía sau tên cột, vì vậy thay vào đó tôi sử dụng:

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

Bạn sẽ cần thêm đường dẫn của bạn vào "nền: url ('/ your/path/sort_both.png')".

của Steve "Bắt đầu với Datatables" là ở đây: http://britseyeview.com/software/dtgs/

Answer 5

Để thay thế cho câu trả lời ở trên, tôi đã sử dụng sau đây (dựa trên cái nhìn sâu sắc trước đó). Lợi ích của tôi là không có phần đệm bổ sung nào được thêm vào bên phải, điều này hữu ích cho các cột không có biểu tượng sắp xếp. (DataTables vẫn gán lớp DataTable_sort_wrapper).

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

Answer 6

Để có phiên bản mới nhất của Datatables (tính đến ngày 31 tháng 3 15). bên trong datatables CSS thay đổi 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 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; 
}