2016-04-27 14 views
1

私は、(ブートストラップスタイリングを使用して)WebアプリケーションにAngular-Datatablesを実装しましたが、例のようにデータテーブルを作成する方法彼らのウェブサイトにテーマがブートストラップされていない角度データテーブルをウェブサイトのように表示できない

は、例えば、そのデータテーブルは、以下の特徴を有する:

  • 各列ヘッダに対するアイコン(以下強調表示されるように)
  • ストライプ列は灰色で始まるカラムヘッダの白背景色、等、次いで白色

Datatables Example

一方、私のデフォルトのテーブルには、次があります

  • ( 以下hightlightedように)現在の順序付けカラム
  • ストライプ列が白色で始まるカラムヘッダーの
  • グレーの背景色を表す矢印私は、標準的なブートストラップを追加した

My example

等、次いでグレーテーマファイル:データテーブル

<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の形式を模倣します。 私は何かを見落としていますか?

答えて

2

これは、さまざまなバージョンの異なるCDNに巨大な不一致があるためです。問題に遭遇したとき、私は本当に自分自身を困惑させました。

あなたは間違いなく「間違った」バージョンdataTables.bootstrap.jsとそのCSSを使用しています。私は、私はまったくどこでも任意の説明を見ていない理由を教えてくれていますが、角度-のDataTableを使用する場合は、公式のブートストラップの実装をスキップして、代わりにこれをダウンロードすることができません。

bower install datatables.net-bs 

をあなたは、あなたが発見することを行っている後dataTables.bootstrap.jsdataTables.bootstrap.cssの公式CDNバージョンと比較して大きな違いがあります。 jは実際にページ区切りボタンを扱い、CSSはグリフコンフォント(あなたが探しているもの)を使って:afterクラスを定義しています。繰り返しますが、私はなぜそれほど異なるバージョンがあるのか​​説明できません。ここで

が、それは動作しますが、私は上記のファイルを抽出し、公式の代わりにそれらを使用していたデモです - > http://plnkr.co/edit/gOQ4bKOhzzfFgViwuAkb?p=preview

+0

返事と明確化のためにありがとう。私はアップデートをダウンロードして、plnkrを通して作業しました。新しいファイルを追加すると、それは今よりはるかに良い(グリフが存在するなど)テーマになっていますが、私はあなたのデモのように色を得ることができないようです。私はあなた自身と同じ順番ですべての同じファイルを含むように自分のコードを調整しましたが、何らかの理由でまだ色が逆になっています。 – Riples

+0

@司祭、私は本当に推測するのは難しいです - あなたはテーブルにクラスを設定していますか?私はデモではなかったが、OPのように、 'class =" table-striped table-hover table-bordered "の代わりに' class = "table-striped" 'のみで試してみた。あなたはまだ他の 'angular-dataTables'/vdataTables'' * .bootstrap.css'を含んでいますか? – davidkonrad

+0

あなたのアドバイスが私の問題に対処する正しい方向で私を間違いなく指摘したため、これを受け入れられた回答としています。最終的には、間違ったCSSファイル、旧式のJSファイル(あなたが示唆したように)を参照し、Carlos13のCSSの選択肢の助けを借りてテーマを微調整することが混在していました。みんなありがとう。 – Riples

0

標準的なブートストラップの統合は同じように見えます。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 { 
} 
+0

です。列ヘッダーの色を変更し、 'table-striped'の行を逆にして、列アイコンを追加する必要があります(これはどのように行うべきかわかりません)。私はそれがデータテーブルのためのブートストラップのデフォルトのように簡単だろうと思った。 – Riples

+0

上記の@davidkonradの答えをご覧ください。私はここでこの答えを残しておきますが、スタイルをさらに微調整したい場合は、これを使用できるようになります。 – carlcheel

0

、フルdatatablesソースコードをダウンロードして自分のWebフォルダにメディアフォルダをコピーしますあなたのコードにCSSを追加してください。

あなたが必要とするファイルは、あなたが、私はオーバーライドする必要があると思われるクラスを識別してください可能性がありmedia/css/jquery.dataTables.css

関連する問題