如何解决样式化jQuery数据表搜索面板
我刚刚发现了数据表搜索面板,但是对样式印象深刻。我已经搜索了有关应用样式的文档,但无法使它起作用:
var tblItems = $("#itemsTable").DataTable({
jQueryUI: true,data: [],dom: 'Bfrtip',buttons: [
{
extend: 'searchPanes',config: {
//dtOpts: {
columns: [0,1,2,5 ],layout: 'columns-4',hideCount: false,info: false,controls: true,cascadePanes: false,className: 'myCustomClass'
}
},
只需检查一下搜索面板(dtsp-xxx)中使用的类并将其覆盖,我如何才能将样式应用于面板(字体大小,颜色,引导程序类等)?
我为myCustomClass设置了一些荒谬的东西,例如粗的红色边框和蓝绿色背景色,以方便地查看它是否被应用。
解决方法
您只能做些有限的事情-但这可能会有所帮助:
我在数据表中添加了以下内容:
columnDefs:[{
searchPanes:{
className: 'myCustomClass'
},targets: '_all'
}]
这会将类名添加到搜索窗格中的每个面板中。
然后我添加了一个非常基本的样式:
<style>
.myCustomClass div.dataTables_scroll {
border-style: solid;
border-color: red;
border-width: 1px;
}
</style>
这将定位每个窗格中的可滚动区域:
一些注意事项:
-
我从未将搜索窗格放在按钮控件中-太好了!但是我确实注意到(对我而言)这样做会在浏览器控制台中引发一些错误,当搜索窗格不在按钮中时不会发生。不确定是否会干扰任何功能。
-
(对我而言)有点直觉,您必须像这样将类名添加到
columnDefs
值中。它可以工作,但也可能有更好的方法。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。