如何将排序图像与数据表定义中的数据表的列标题对齐？

Question

我创建了一个带有数据表的页面。 但是，当显示数据表时，排序图像出现在下一行：

这是表的定义方式：

$("#tblTable").dataTable(
    {
        "sDom": 't<"F"i>',
        "aoColumns": [
            {"sWidth": "17%", "sType": "string", "bSortable": true },  
            {"sWidth": "10%", "sType": "string", "bSortable": true }, 
            {"sWidth": "15%", "sType": "string", "bSortable": true },  
            {"sWidth": "58%", "sType": "string", "bSortable": false}                   
        ],
        "sScrollY": "180px",
        "bPaginate": false,
        "bFilter": false,
        "aaSorting": [],
        "bAutoWidth": false,
        "bInfo": true,
        "bJQueryUI": true
    });

有可能将其固定在桌子的内部吗？

Answer 1

是的...您可以像这样调整每列使用的总数的百分比：

"aoColumns": [
            {"sWidth": "15%", "sType": "string", "bSortable": true},  
            {"sWidth": "15%", "sType": "string", "bSortable": true }, 
            {"sWidth": "15%", "sType": "string", "bSortable": true },  
            {"sWidth": "55%", "sType": "string", "bSortable": false}                   
        ],

看起来您的第二列太窄了，只有10％。

或者，您可以删除所有sWdith设置并将bAutoWidth切换为true （ "bAutoWidth": true, ）

Answer 2

我找到了解决方案：基本上，呈现数据表时，排序箭头部分由span区域表示： <span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-ns" style="vertical-align: middle; display: inline-block;"

我必须将$('.ui-icon').css('display', 'inline-block')到数据表定义中。

这为我解决了。

希望能对某人有所帮助。