Question

我试图影响角度数据表的过滤和分页控件的外观，并发现它可以使用框架的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'
        }
    }
})

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

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

Answer 1

如果您在浏览器中使用开发人员工具，则angular-datatables已经将类放在您可以设置样式的分页按钮上。要在Chrome中查看开发者工具，请右键单击该元素，然后选择＆＃34;检查元素＆＃34;。您应该能够看到可用的样式类。

当前的paginate按钮具有以下类：＆＃34; paginate_button current＆＃34;。其他按钮有类＆＃34; paginate_button＆＃34;。

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

例如，

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

将这些样式放入您的页面。您也应该能够更改填充和边距。这比试图改变Javascript要简洁得多。

使用withBootstrapOptions设置角度数据表的过滤器和分页控件

1 个答案: