読者です 読者をやめる 読者になる 読者になる

unhurried

コンピュータ関連ネタがほとんど、ときどき趣味も…

angular-datatablesの使い方

angular-datatablesの使い方(導入まで)をまとめました。

依存ライブラリをインストールする。(手動追加する場合)
  • jQuery、DataTables、AngularJS、angular-datatablesをhtmlからリンクする。
  • ソート方向を表すアイコンを表示するためにDataTablesのimageディレクトリもコピーすると良い。(例では lib/dataTables/images に保存している。)
<script src="./lib/jquery/js/jquery.min.js"></script>
<script src="./lib/dataTables/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="./lib/dataTables/css/jquery.dataTables.min.css">
<script src="./lib/angular/js/angular.min.js"></script>
<script src="./lib/angular-datatables/js/angular-datatables.min.js"></script>
<link rel="stylesheet" href="./lib/angular-datatables/css/angular-datatables.min.css">
html:tableタグにディレクティブ(属性)とバインド変数を指定する。
ディレクティブ バインド変数   
datatabales (angular-datatablesを適用する)   
dt-options DataTablesのオプション   
dt-column-defs 行の定義(静的な表に利用する)   
dt-column 行の定義(動的に生成する表に利用する)
<table 
    datatable=""
    dt-options="dtOptions"
    dt-column-defs="dtColumnDefs"
    dt-column="dtColumn"
    class="row-border hover">
    <thead><tr>
        <th>A</th>
        <th>B</th>
    </tr></thead>
    <tr>
        <td>1</td>
        <td>bbb</td>
    </tr>
    <tr>
        <td>2</td>
        <td>aaa</td>
    </tr>
</table>
js:バインド変数に値を設定する。
$scope.dtOptions = DTOptionsBuilder.newOptions();
$scope.dtColumnDefs = [
    // 1列目を数字としてソートする。
    DTColumnDefBuilder.newColumnDef(0).withOption("sType", "num"),
];
$scope.dtColumn = [];