似乎无法像网站示例那样主题自举角度数据表

Question

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

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

• 针对每个列标题的图标（如下所示）
• 列标题的白色背景颜色
• 以灰色开始的条纹行，然后是白色等

然而，我的默认表格如下：

• 表示当前有序列的箭头（如高亮显示） 下文）
• 列标题的灰色背景颜色
• 以白色开始，然后是灰色等条纹行

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

s_oDataset.removeAll();

设置我的默认数据表：

<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">

并使用bootstrap选择了我的数据表：

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

即使是bootstrap网站上的示例也都模仿了数据表格式。 我可以忽视一些事情吗？

Answer 1

这是因为不同版本之间存在巨大的不匹配，这些版本存在于不同的CDN上。当我遇到问题时，我真的很困惑。

你做得很好，你只是意外地使用＆＃34;错误＆＃34;版本dataTables.bootstrap.js及其CSS。我不知道为什么，我在任何地方都没有看到任何解释，但是如果你使用angular-dataTables，那么跳过官方的bootstrap实现并下载它：

bower install datatables.net-bs

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

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

Answer 2

标准引导程序集成看起来相同，请参阅this link。

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

灰色替代行：

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

灰色标题（添加！重要以覆盖sorting_asc，sorting_desc样式，但如果需要，您可以单独设置这些样式）

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

排序图标：

您可以覆盖以下样式：

table.table thead .sorting_desc {
}

table.table thead .sorting_desc:before {
}

Answer 3

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

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