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 = [];