私は、(ブートストラップスタイリングを使用して)WebアプリケーションにAngular-Datatablesを実装しましたが、例のようにデータテーブルを作成する方法彼らのウェブサイトにテーマがブートストラップされていない角度データテーブルをウェブサイトのように表示できない
は、例えば、そのデータテーブルは、以下の特徴を有する:
- 各列ヘッダに対するアイコン(以下強調表示されるように)
- ストライプ列は灰色で始まるカラムヘッダの白背景色、等、次いで白色
一方、私のデフォルトのテーブルには、次があります
- ( 以下hightlightedように)現在の順序付けカラム
- ストライプ列が白色で始まるカラムヘッダーの
- グレーの背景色を表す矢印私は、標準的なブートストラップを追加した
等、次いでグレーテーマファイル:データテーブル
<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>
とブートストラップと私のDataTableをオプションで用意している:ブートストラップウェブサイト上
$scope.dtOptions = DTOptionsBuilder
.fromFnPromise(function() {
var deferred = $q.defer();
deferred.resolve(users);
return deferred.promise;
})
.withBootstrap() // Style with Bootstrap
...
};
でも例は、すべてのDataTableの形式を模倣します。 私は何かを見落としていますか?
返事と明確化のためにありがとう。私はアップデートをダウンロードして、plnkrを通して作業しました。新しいファイルを追加すると、それは今よりはるかに良い(グリフが存在するなど)テーマになっていますが、私はあなたのデモのように色を得ることができないようです。私はあなた自身と同じ順番ですべての同じファイルを含むように自分のコードを調整しましたが、何らかの理由でまだ色が逆になっています。 – Riples
@司祭、私は本当に推測するのは難しいです - あなたはテーブルにクラスを設定していますか?私はデモではなかったが、OPのように、 'class =" table-striped table-hover table-bordered "の代わりに' class = "table-striped" 'のみで試してみた。あなたはまだ他の 'angular-dataTables'/vdataTables'' * .bootstrap.css'を含んでいますか? – davidkonrad
あなたのアドバイスが私の問題に対処する正しい方向で私を間違いなく指摘したため、これを受け入れられた回答としています。最終的には、間違ったCSSファイル、旧式のJSファイル(あなたが示唆したように)を参照し、Carlos13のCSSの選択肢の助けを借りてテーマを微調整することが混在していました。みんなありがとう。 – Riples