如何將排序圖像與數據表定義中的數據表的列標題對齊？

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')到數據表定義中。

這為我解決了。

希望能對某人有所幫助。