似乎无法像网站示例那样引导 angular-datatable 主题

Question

我已经将 Angular-Datatables 实现到我的 Web 应用程序中（使用 Bootstrap 样式），但我似乎无法弄清楚如何使我的数据 table 看起来像示例在他们的网站上。

例如他们的数据table具有以下特征：

每列的图标 header（如下突出显示）
列的背景颜色为白色 headers
以灰色开始的条纹行，然后是白色，等等

然而，我的默认 table 具有以下内容：

表示当前排序列的箭头（突出显示下）
列 headers
条纹行从白色开始，然后是灰色，等等

我添加了标准 bootstrap 主题文件：

<link rel="stylesheet" type="text/css" href="../vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../vendor/angular-datatables/dist/plugins/bootstrap/datatables.bootstrap.min.css">

设置我的默认数据table:

<div>
     <table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-striped table-hover table-bordered" width="100%"></table>
</div>

并选择了我的数据tables bootstrap:

$scope.dtOptions = DTOptionsBuilder
            .fromFnPromise(function() {
                var deferred = $q.defer();
                deferred.resolve(users); 
                return deferred.promise;
            })
            .withBootstrap() // Style with Bootstrap
...
};

甚至 bootstrap 网站上的示例都模仿数据table 的格式。我是不是忽略了什么？

Answer 1

标准 bootstrap 集成看起来一样，参见 this link。

要覆盖默认值类，请执行以下操作：

灰色备选行：

table.dataTable tbody tr.even {
    background-color: #EEE;
}

灰色标题（添加了 !important 以覆盖 sorting_asc、sorting_desc 样式，但您可以根据需要单独设置这些样式）

table.dataTable thead th {
    background-color: #EEE !important;
}

排序图标：

您可以覆盖以下样式：

table.table thead .sorting_desc {
}

table.table thead .sorting_desc:before {
}

Answer 2

这是由于不同 CDN 上的不同版本之间存在巨大的不匹配。当我运行进入这个问题时，我自己真的很困惑。

你做得很好，你只是不小心使用了 "wrong" 版本 dataTables.bootstrap.js 及其 CSS。我不知道为什么，我在任何地方都没有看到任何解释，但是如果你使用 angular-dataTables，那么跳过官方 bootstrap 实现并下载它：

bower install datatables.net-bs

完成后，您会发现 dataTables.bootstrap.js 和 dataTables.bootstrap.css 与官方 CDN 版本相比存在巨大差异。 js 实际上解决了分页按钮，CSS 使用 glyphicon 字体（您正在寻找的）定义 :after 类等等。同样，我无法解释为什么会有如此不同的版本。

这是一个演示，我提取了上述文件并使用它们而不是官方文件，然后就可以了 -> http://plnkr.co/edit/gOQ4bKOhzzfFgViwuAkb?p=preview

Answer 3

下载完整的 datatables 源代码，将媒体文件夹复制到您的 Web 文件夹并将 CSS 添加到您的代码中。

您需要的文件是 media/css/jquery.dataTables.css

似乎无法像网站示例那样引导 angular-datatable 主题

Can't seem to theme bootstrapped angular-datatable like website example

datatables

twitter-bootstrap

angularjs

angular-datatables