使用 withBootstrapOptions 的 angular-datatables 样式过滤器和分页控件

Question

我试图影响 angular-datatables 的过滤和分页控件的外观，发现可以使用框架的 withBootstrapOptions 来完成。但是，我似乎找不到影响分页按钮、页面大小条目字段和过滤器字段样式的选项。我想要做的就是让输入字段和按钮的高度更小。下面的代码是我到目前为止尝试过的代码：

.withBootstrap()
.withBootstrapOptions({
    TableTools: {
        classes: {
            container: 'btn-group',
            buttons: {
                normal: 'btn btn-danger'
            }
        }
    },
    ColVis: {
        classes: {
            masterButton: 'btn btn-primary'
        }
    },
    pagination: {
        classes: {
            ul: 'xxx',
            li: 'yyy',
            a: 'zzz'
        }
    }
})

我一直在尝试将我自己的类添加到 table 来进行样式设置，并且我能够设置 ul 元素的类使用上面的代码对分页控件的 xxx 进行操作，但是当我尝试对 li 或 a 元素进行操作时，它不起作用。这可能吗？有人可以给我提供一个示例，说明如何操作过滤器输入字段和分页 field/buttons 高度吗？

此外，有人知道我在哪里可以找到我可以与 'withBootstrapOptions' 助手一起使用的所有可用选项的文档吗？我似乎无法通过搜索找到它。

Answer 1

如果您在浏览器中使用开发人员工具，angular-datatables 已经将 classes 放在您可以设置样式的分页按钮上。要查看 Chrome 中的开发人员工具，请右键单击元素并 select "inspect element"。您应该能够看到可用的 class 样式。

当前分页按钮有class："paginate_button current"。其他按钮有 class "paginate_button".

使用 CSS，您应该能够以任何您想要的方式设置这些样式。

例如，

.paginate_button{
 background: #fff;
cursor: pointer;
}
.paginate_button:hover{
  background: #b20000;
}
.paginate_button.current{
  background: #b20000;
}

将这些样式放入您的页面。您也应该能够更改填充和边距。这看起来比在 Javascript.

中尝试更改要干净得多

使用 withBootstrapOptions 的 angular-datatables 样式过滤器和分页控件

Styling filter and pagination controls of angular-datatables using withBootstrapOptions

angular-datatables