0

アプリケーションで角度データテーブルを使用しました。以下に示すようにオプションを適用しました。

$scope.dtOptions = DTOptionsBuilder.newOptions()
                .withOption('responsive', true)
                .withOption('bAutoWidth', false)
                .withOption('paging', false)
                .withOption('sorting', false)
                .withOption('searching', false)
                .withOption('info', false)
                .withDOM('frtip');

そして、列定義を次のように設定しました。

$scope.dtColumnDefs = [
    DTColumnDefBuilder.newColumnDef(0).notSortable(),
    DTColumnDefBuilder.newColumnDef(1).notSortable(),
    DTColumnDefBuilder.newColumnDef(2).notSortable(),
    DTColumnDefBuilder.newColumnDef(3).notSortable(),
    DTColumnDefBuilder.newColumnDef(4).notSortable(),
    DTColumnDefBuilder.newColumnDef(5).notSortable(),
    DTColumnDefBuilder.newColumnDef(6).notSortable(),
    DTColumnDefBuilder.newColumnDef(7).notSortable()
];

角度テーブルを使用したhtmlページ、

<table id="userTable" datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" class="table table-striped table-bordered dt-responsive nowrap res_table" cellspacing="0" width="100%">

データテーブルのページネーションは必要ありません。だから私はそれを削除しました。しかし、テーブルに遅延読み込みを実装する必要があります。オプションに以下を追加して、テーブルにスクロールバーを追加しました。

.withOption('scrollY', '48vh')

しかし、テーブルのスクロールイベントをキャッチできません。スクロールがテーブルの最後に達したことを確認するにはどうすればよいですか? したがって、サーバーから次のデータ セットを取得して、テーブルに追加できます。私を助けてください。

4

1 に答える 1

1

スクロールの高さを指定してスクロールを使用している場合、dataTables はテーブルのコンテンツを 2 つの異なるセクションに分割します。.dataTables_scrollHead元のヘッダーを持つテーブルを保持する要素、および.dataTables_scrollBody- 非表示のヘッダー (高さが 0 に設定) を持つテーブルがスクロール可能な要素。したがって、要素のonscrollイベントをリッスンする必要があります。.dataTables_scrollBody

angular.element(document).on('init.dt', function() {
   document.querySelector('.dataTables_scrollBody').onscroll = function(e) {
      if ((e.target.clientHeight + e.target.scrollTop) > e.target.scrollHeight-30) { 
         console.log('we are near the bottom')
      }
   }
})

AJAX ソースと質問からのほとんどの設定を使用した Angular dataTables デモ ->

http://plnkr.co/edit/CvdCTtwdRNuk74DtjB3O?p=preview

于 2016-01-06T13:44:40.943 に答える