设置jQuery数据表搜索面板的样式

Question

我刚刚发现了数据表搜索面板，但对样式印象太深刻了。我已经搜索了应用样式的文档，但无法使其工作：

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)中使用的类并覆盖它们之外，我如何将样式应用于面板(font-size，color，bootstrap classes，...)？

我给myCustomClass设置了一些可笑的东西，比如粗大的红色边框和青色背景色，这样就可以很容易地看到它是否被应用了。

Answer 1

你能做的有些有限--但这可能会有所帮助：

我在我的DataTable中添加了以下内容：

columnDefs:[{
  searchPanes:{
    className: 'myCustomClass'
  },
  targets: '_all'
}]

这会将类名称添加到搜索窗格中的每个面板中。

然后我添加了一个非常基本的风格：

<style>
.myCustomClass div.dataTables_scroll {
  border-style: solid;
  border-color: red;
  border-width: 1px;
}
</style>

这将定位每个窗格中的可滚动区域：

​

​

以下是几个注意事项：

1. 我从来没有把搜索窗格放在按钮控件中-很好！但我确实注意到(对我而言)这样做会在浏览器控制台中抛出几个错误，当搜索窗格不在按钮中时不会发生这些错误。不确定这是否会干扰任何functionality.

，

1. ，这有点违反直觉(对我来说)，你必须像这样把类名加到一个columnDefs值上。这是可行的，但也有可能有更好的方法。