1

我已经在我的 Web 应用程序中实现了 Angular-Datatables（使用 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">

设置我的默认数据表：

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

并使用引导程序选择了我的数据表：

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

甚至引导网站上的示例都模仿了数据表格式。我可能忽略了什么吗？

4

3 回答 3

2

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

你做得很好，你只是不小心使用了“错误”的版本dataTables.bootstrap.js和它的CSS. 我不知道为什么，我在任何地方都没有看到任何解释，但是如果您使用 angular-dataTables，请跳过官方引导实现并下载它：

bower install datatables.net-bs

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

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

于 2016-04-27T08:53:48.343 回答
0

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

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

于 2017-07-11T07:54:21.170 回答
0

标准引导集成看起来相同，请参阅此链接。

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

灰色替代行：

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 {
}
于 2016-04-27T07:55:42.063 回答