web-dev-qa-db-ja.com

jQuery dataTables-左揃えソートアイコン

あなたが見ることができるように私のDatatableのソートアイコンは列の右端にあります：

enter image description here

これらをテキストの直後に表示されるように左に揃えることは可能ですか？

すなわち。

# ^            Technician ^              Completed Date ^

ありがとうございました

要求されたコード：

    <div class="dataTable_wrapper">
        <table class="table table-striped table-hover" id="table-d">
            <thead>
            <tr>
                <th>{% trans %} id {% endtrans %}</th>
                <th>{% trans %} technician {% endtrans %}</th>
                <th>{% trans %} date {% endtrans %}</th>
                <th>{% trans %} summary {% endtrans %}</th>
            </tr>
            </thead>
        </table>
    </div>

そして：

$('#table-d').DataTable( {
    "processing": true,
    "serverSide": true,
    "ajax": "{{ path('table_data') }}",
    "pageLength": 10
})'
jqueryhtmlcssjquery-datatables
20
b85411

いいえ、実際には矢印は<th>に動的にアタッチされたCSSクラスの背景画像であるため、テキストの直後に表示することはできません。ただし、位置を右から左に変更できます。

table.dataTable thead .sorting_asc {
  background: url("http://cdn.datatables.net/1.10.0/images/sort_asc.png") no-repeat center left;
}
table.dataTable thead .sorting_desc {
  background: url("http://cdn.datatables.net/1.10.0/images/sort_desc.png") no-repeat center left;
}
table.dataTable thead .sorting {
  background: url("http://cdn.datatables.net/1.10.0/images/sort_both.png") no-repeat center left;
}

enter image description here

デモ->http://jsfiddle.net/ttcz5odt/

更新-テキストの直後に矢印アイコンを配置する方法

少し余分なことを考えてみてください-少しの「ハック」でそれは確かに可能です。トリックは、<th>バックグラウンドを無効にし、代わりに元のdataTablesバックグラウンドで<span>を継続的に挿入/削除することです。

CSS（オリジナルを無効にする以外）：

span.arrow-hack {
  margin-left: 5px;
}
span.asc {
  background: url("http://cdn.datatables.net/1.10.0/images/sort_asc.png") no-repeat center right;
}
span.desc {
  background: url("http://cdn.datatables.net/1.10.0/images/sort_desc.png") no-repeat center right;
}
span.sort {
  background: url("http://cdn.datatables.net/1.10.0/images/sort_both.png") no-repeat center right;
}

脚本 ：

var spanSorting = '<span class="arrow-hack sort">&nbsp;&nbsp;&nbsp;</span>',
    spanAsc = '<span class="arrow-hack asc">&nbsp;&nbsp;&nbsp;</span>',
    spanDesc = '<span class="arrow-hack desc">&nbsp;&nbsp;&nbsp;</span>';

$("#example").on('click', 'th', function() {
    $("#example thead th").each(function(i, th) {
        $(th).find('.arrow-hack').remove();
        var html = $(th).html(),
            cls = $(th).attr('class');
        switch (cls) {
            case 'sorting_asc' : 
                $(th).html(html+spanAsc); break;
            case 'sorting_desc' : 
                $(th).html(html+spanDesc); break;
            default : 
                $(th).html(html+spanSorting); break;
        }
    });     
});

矢印アイコンを更新します。

$("#example th").first().click().click();

今、私たちが望んでいたように見えます！ ： enter image description here

デモ->http://jsfiddle.net/dmn4q141/

19
davidkonrad

私は次のスタイルを適用してこれを行うことができました（最後のCSSにファイル定義が含まれている場合に適用した方が良いです）

/**
 * Datatables Sorting icons on left
 */

table.dataTable thead > tr > th {
    padding-left: 30px !important;
    padding-right: initial !important;
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    left: 8px !important;
    right: auto !important;
}
26
Gabriel

DataTablesフォーラム に投稿された非常に素晴らしいソリューションがあります。

1
jake stayman

cssを次のように変更できます

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

次に、矢印と見出しをより魅力的にするためのcssを示します（必須ではありません）。

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: 5px center;
}
table.dataTable thead th, table.dataTable thead td {
    padding: 10px 18px 10px 28px;           
}
1
Dens

並べ替えと簡単な答えを次に示します。

私の画面では、160pxで十分です。

必要に応じて調整してください。

 #table-d thead .sorting::after, table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::after 
 {
        left: 160px;
        right: 0;
  }
0
Bharat