【问题标题】:Angularjs jQuery datatables add processing eventAngularjs jQuery 数据表添加处理事件
【发布时间】:2016-02-16 08:10:55
【问题描述】:

我使用 Angular 数据表模块。 https://github.com/l-lin/angular-datatables

我尝试添加processing.dt 事件,但它不起作用。

这是来自基础 api 的原始代码 https://datatables.net/reference/event/processing

$('#example')
    .on( 'processing.dt', function ( e, settings, processing ) {
        $('#processingIndicator').css( 'display', processing ? 'block' : 'none' );
    } )
    .dataTable();

这是我未完成的代码

.withOption('processing.dt', function( e, settings, processing){
           console.log(processing);
           $scope.loading = processing;
           }) .withOption('initComplete', function(){
                $scope.loading = false;
           })

【问题讨论】:

    标签: javascript angularjs datatables angular-datatables


    【解决方案1】:

    在处理角度数据表时使用 dataTables 事件没有区别。如果你有一张桌子

    <table datatable dt-options="dtOptions" dt-columns="dtColumns" id="example">
    

    那么这有效 [http://plnkr.co/edit/hBDjR9ytD0hK6YgwrgMd?p=preview]

    $('#example').on('processing.dt', function() {
       console.log('processiong.dt');
    })
    

    这有效 [http://plnkr.co/edit/zKYyrneXl2YudNTXZkXv?p=preview]

    angular.element('#example').on('processing.dt', function() {
       console.log('processiong.dt');
    })
    

    如果你使用dtInstance,你甚至可以附加事件监听器(这里等待dtInstance被初始化,然后附加一个order.dt处理程序[http://plnkr.co/edit/DJa1xwzxArrWhplDY278?p=preview]):

    $scope.dtInstance = {}    
    
    $scope.$watch('dtInstance', function() {
        if ($scope.dtInstance.DataTable) {
            $scope.dtInstance.DataTable.on('order.dt', function() {
               console.log('order.dt')
            })
        }
    })  
    

    只是为了证明没有特定的“角度数据表”方式来处理事件,它基本上是完全相同的——你只有更多的选择,因为你也有 angular.element() 方式并且可以处理特殊的 @ 987654332@ 对象。

    【讨论】:

    • angular.element('#cart_activity_table').on('processing.dt', function(e, settings, processing){ $scope.loading = processing; });工作
    猜你喜欢
    • 2012-01-18
    • 2011-06-04
    • 1970-01-01
    • 1970-01-01
    • 2010-11-20
    • 1970-01-01
    • 1970-01-01
    • 2010-10-07
    相关资源
    最近更新 更多