如何左对齐 Jquery 数据表分页按钮

Posted 2023-05-07

【中文标题】如何左对齐 Jquery 数据表分页按钮

【英文标题】：how to left align the Jquery datatable pagination buttons

【发布时间】：2012-06-28 04:29:26

【问题描述】：

关于的任何想法？ 默认情况下，顶部按钮居中对齐，底部按钮右对齐。 有什么想法吗？

【参考方案1】：

您需要使用 !important 来覆盖应用于分页器的现有样式。

.dataTables_paginate 
  float: left !important;

【讨论】：

关于为什么这被否决的任何解释？它对我有用。

【参考方案2】：

div.dataTables_paginate float: left; margin: 0; 应该可以解决问题。

【讨论】：

非常感谢您的快速回复。但它不起作用......我在css文件中改变了这样的：.dataTables_paginate width: 44px; * 宽度：50px；向左飘浮;文本对齐：左； 但仍然以相同的方式显示....以前它是正确的，我将其更改为左。有什么想法吗？

@user1457957 为什么里面有*？

我不知道，默认情况下它存在于带有数据表示例的 css 中

嗯，老实说，我什至不记得我对我的实例做了什么（我重写了部分 JS 以使其在视觉上适合 Bootstrap。我会看看我的所有更改并稍后回复您（如果其他人没有先解决此问题）

【参考方案3】：

这是我使用默认 datatable（无 dom/sDom 设置）所做的，因此分页控件位于 x of y 信息下，两个项目都左对齐并位于表格底部：

Showing 1 to 25 of NN entries
First Previous 1 2 3 4 5 Next Last

我添加了这个样式：

    <style type="text/css">
        div.dataTables_info 
            position: absolute
        

        div.dataTables_wrapper div.dataTables_paginate 
            float: unset;
            text-align: left;
            padding-top: 28px;
            padding-bottom: 10px;
            white-space: nowrap;
        
    </style>

使用这些设置：

                "bJQueryUI": true,
                "iDisplayLength": 25,
                "sPaginationType": "full_numbers",
                "aLengthMenu": [[10, 25, 50, 100, 200, -1], [10, 25, 50, 100, 200, "All"]],