JQuery Datatables排序图像位置

Question

我正在使用jQuery数据表，并希望移动排序图像，说排序箭头图像应该是10px到列标题的右侧。通过将以下css属性更改为左侧或右侧或中心似乎对我不起作用。我希望图像（排序图像）为cloumn标题名称右侧的10px。将列标题设置为客户经理名称。

.sorting_asc { 
 background: url('images/sort_asc.png') no-repeat center center;    
   color:#000000;  
text-align:left;       
 } 

请帮忙。

谢谢

Answer 1

您将要将父div设置为relative或absolute。然后将作为图标的div设置为绝对值。然后，您可以使用left和top在此元素中定位图标。

定位可能令人困惑。我喜欢这个视频，它非常适合简单地解释定位以及它们如何相互作用。

http://css-tricks.com/video-screencasts/110-quick-overview-of-css-position-values/

Answer 2

**//You can use the following workaround to achieve the same**

 $('tableId').Datatable({
 
 initComplete: function (settings, json) {

                var spanSorting = '<span class="arrow-hack">&nbsp;&nbsp;&nbsp;</span>';
                 
                $('tableId' + " thead th").each(function (i, th) {

                    var cls = $(th).attr('class');

//only sortable column should be updaed with the new sortable span with respective background icon

                    if (cls == 'sorting' || cls == 'sorting_asc' || cls == 'sorting_desc') {
                        $(th).html($(th).html() + spanSorting);
                    }
                });
            },
 
 });

// remove background-image for th in datatable css
 table.dataTable thead .sorting {
        background-image: none;
    }

    table.dataTable thead .sorting_asc {
        background-image: none;
    }

    table.dataTable thead .sorting_desc {
        background-image: none;
    }
    
 //Add new css property to show sorting image for dynamically created span   
table.dataTable thead .sorting span.arrow-hack {
    background-image: url("../datatables/images/sort_both.png");
    background-position: 13px 17px;
    margin-left: 10px;
}

table.dataTable thead .sorting_asc span.arrow-hack {
    background-image: url("../datatables/images/sort_asc.png");
    background-position: 13px 17px;
    margin-left: 10px;
}

table.dataTable thead .sorting_desc span.arrow-hack {
    background-image: url("../datatables/images/sort_desc.png");
    background-position: 13px 17px;
    margin-left: 10px;
}