数据表导出按钮与右下角对齐

如何解决数据表导出按钮与右下角对齐

在我的项目中使用 DataTables 时，当我使用 float:right 将导出按钮对齐到表格的右侧时。它没有与桌子的右边缘正确对齐。而当我设置 float:left 时它正确对齐。

请为此提出解决方案。

$(" #adminMainTable,#managerMainTable").DataTable( {
    scrollY:        '50vh',scrollCollapse: true,paging:         false,dom: 'frtpB',//This changes the position to Bottom
    buttons: [
        { extend: 'excelHtml5',text: 'To Excel' },{ extend: 'csvHtml5',text: 'To CSV' },{ extend: 'pdfHtml5',text: 'To PDF' }
        
    ]
    
});

//以下代码用于将按钮的位置更改为表格右侧

$("div#adminMainTable_wrapper,div#managerMainTable_wrapper").find($(".dt-buttons")).css("float","right");

解决方法

使用与您的代码类似的方法来实现向右浮动，您可以这样做：

$(your selector in here).find($(".dt-buttons button.dt-button:nth-child(3)")).css("margin-right","0");

换句话说，删除最后一个按钮的右内边距。

您可以使用 :nth-child(3) 代替 :last-child。如果按钮的数量发生变化，那可能会更安全。