1

Angular-Datatables を Web アプリケーションに (Bootstrap スタイルを使用して) 実装しましたが、データテーブルを Web サイトの例のように見せる方法がわかりません。

たとえば、データテーブルには次の特徴があります。

  • 各列ヘッダーに対するアイコン (以下で強調表示)
  • 列ヘッダーの白い背景色
  • 灰色で始まり、次に白などの縞模様の行。

データテーブルの例

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

  • 現在の順序付けされた列を表す矢印 (以下で強調表示)
  • 列ヘッダーの灰色の背景色
  • 白色、次に灰色などの縞模様の行。

私の例

標準のブートストラップ テーマ ファイルを追加しました。

<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
...
};

ブートストラップ Web サイトの例でさえ、すべて datatables 形式を模倣しています。私は多分何かを見落としていますか?

4

3 に答える 3

2

これは、異なる CDN に存在する異なるバージョン間の大きな不一致によるものです。問題に遭遇したとき、私は本当に困惑しました。

あなたはそれをうまくやっています.「間違った」バージョンdataTables.bootstrap.jsとそのCSS. 理由はわかりません。どこにも説明がありませんが、angular-dataTables を使用している場合は、公式のブートストラップ実装をスキップして、代わりにこれをダウンロードしてください。

bower install datatables.net-bs

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

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

于 2016-04-27T08:53:48.343 に答える