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-n-s" style="vertical-align: middle; display: inline-block;"

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

为我修好了。

希望能帮助别人。

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

2 个答案: