javascript - AngularJs で Jquery Datatable を使用する

Question

angularjs プロジェクトでjquery データテーブル プラグインを使用しようとしています。しかし、私の質問は、angularjs の値の遅延読み込みをサポートしていますか? 行がたくさんあるので欲しいです。angularjs でデータテーブル パイプラインを使用する方法 。

ここにページネーションの解決策があります。angularjsでソリューションを使用するには?

Answer 1

将来の研究者の参考として新しい回答を追加し、まだ誰も言及していないので、それは有効だと思います。

別の良いオプションはng-grid http://angular-ui.github.io/ng-grid/です。

また、ベータ版 ( http://ui-grid.info/ ) が既に利用可能で、いくつかの改善が行われています。

• ネイティブ AngularJS 実装、jQuery なし
• 大規模なデータセットでうまく機能します。10,000 行以上
• 必要な機能だけを使用できるプラグイン アーキテクチャ

アップデート：

UI GRID はもうベータ版ではないようです。

3.0 リリースでは、リポジトリの名前が「ng-grid」から「ui-grid」に変更されました。

Answer 2

AngularJs の場合、データテーブル設定に「angular-datatables.min.js」ファイルを使用する必要があります。これはhttp://l-lin.github.io/angular-datatables/#/welcomeから取得できます。

その後、以下のようなコードを書くことができます。

<script>
  var app = angular.module('AngularWayApp', ['datatables']);
</script>

<div ng-app="AngularWayApp" ng-controller="AngularWayCtrl">
  <table id="example" datatable="ng" class="table">
    <thead>
      <tr>
        <th><b>UserID</b></th>
        <th><b>Firstname</b></th>
        <th><b>Lastname</b></th>
        <th><b>Email</b></th>
        <th><b>Actions</b></th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="user in users" ng-click="testingClick(user)">
        <td>{{user.UserId}}</td>
        <td>{{user.FirstName}}</td>
        <td>{{user.Lastname}}</td>
        <td>{{user.Email}}</td>
        <td>
           <span ng-click="editUser(user)" style="color:blue;cursor: pointer; font-weight:500; font-size:15px" class="btnAdd" data-toggle="modal" data-target="#myModal">Edit</span> &nbsp;&nbsp; | &nbsp;&nbsp;
          <span ng-click="deleteUser(user)" style="color:red; cursor: pointer; font-weight:500; font-size:15px" class="btnRed">Delete</span>
         </td>
       </tr>
     </tbody>
   </table>
 </div>

Answer 3

他の開発者によって作成されたドラッグ アンド ドロップの角度モジュールを使用するのが魅力的であることはわかっていますが、実際には、サービス チャンスを呼び出して ng-repeated データ セットから行を動的に追加/削除するなどの非標準的なことをしていない限り、あなたは$http本当にそうしませんか?ディレクティブベースのソリューションが必要なので、この方向に進むと、おそらく実際には必要のない余分なウォッチャーを作成したことになります。

この実装が提供するもの:

• ページネーションは常に正しい
• フィルタリングは常に正しい (カスタム フィルターを追加したとしても、もちろんそれらは同じクロージャーにある必要があるだけです)

実装は簡単です。ビューのコントローラーから、Angular のバージョンの jQuery dom を使用するだけです。

コントローラーの内部:

'use strict';

var yourApp = angular.module('yourApp.yourController.controller', []);

yourApp.controller('yourController', ['$scope', '$http', '$q', '$timeout', function ($scope, $http, $q, $timeout) {

    $scope.users = [
        {
            email: 'email@address.com',
            name: {
                first: 'User',
                last: 'Last Name'
            },
            phone: '(416) 555-5555',
            permissions: 'Admin'
        },
        {
            email: 'example@email.com',
            name: {
                first: 'First',
                last: 'Last'
            },
            phone: '(514) 222-1111',
            permissions: 'User'
        }
    ];

    angular.element(document).ready( function () {
         dTable = $('#user_table')
         dTable.DataTable();
     });

}]);

これで、html ビューで次のことができます。

<div class="table table-data clear-both" data-ng-show="viewState === possibleStates[0]">
        <table id="user_table" class="users list dtable">
            <thead>
                <tr>
                    <th>E-mail</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Phone</th>
                    <th>Permissions</th>
                    <th class="blank-cell"></th>
                </tr>
            </thead>
            <tbody>
                <tr data-ng-repeat="user in users track by $index">
                    <td>{{ user.email }}</td>
                    <td>{{ user.name.first }}</td>
                    <td>{{ user.name.last }}</td>
                    <td>{{ user.phone }}</td>
                    <td>{{ user.permissions }}</td>
                    <td class="users controls blank-cell">
                        <a class="btn pointer" data-ng-click="showEditUser( $index )">Edit</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>