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