JQuery数据表排序图像位置答案

【问题标题】：JQuery Datatables Sorting image positionJQuery数据表排序图像位置
【发布时间】：2012-04-25 07:31:47
【问题描述】：

我正在使用 jQuery Datatables 并想移动排序图像说排序箭头图像应该在列标题右侧 10px 处。通过将下面的 css 属性更改为 left 或 right 或 center 似乎对我不起作用。我希望图像（排序图像）在 cloumn 标题名称右侧 10 像素。说列标题是客户经理名称。

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

请帮忙。

谢谢

【问题讨论】：

也许添加一个 jsfiddle 来展示您的示例将有助于清楚地描述问题

标签： jquery jquery-ui jquery-datatables

【解决方案1】：

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

定位可能会令人困惑。我喜欢这个视频，它在简单地解释定位以及它们如何相互作用方面做得很好。

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

【讨论】：

【解决方案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;
}

【讨论】：