2

我正在使用 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;       
 }

请帮忙。

谢谢

4

2 回答 2

0

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

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

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

于 2012-05-10T14:42:35.620 回答
0 

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

于 2018-09-03T18:28:50.030 回答