使用angularjs动态数据时Jquery数据表重新加载问题

Question

嗨，我正在使用带有angularJs的jquery参考站点: dataTable --这对于静态数据来说很好，但是我是从数据库绑定数据，然后是它的创建问题。数据显示我没有数据可用的消息，我正在使用UI路由器用于单页应用程序。

HTML代码：

<table class="table table-bordered bordered table-striped table-condensed 
datatable table-hover"
             ui-jq="dataTable" ui-options="wfPkgTblOpt" id="wfPkgTbl">  
  <thead>
    <tr>
      <th style="display:none" >Package ID</th>
      <th>#</th>
      <th>Package Name</th>
        <th>Client Name</th>
    </tr>
  </thead>
    <tbody>
           <tr  ng-repeat="pkg in pkgWFList" ng- 
include="getPkgWf(pkg);"> 

           </tr>
    </tbody> 
 </table> 

 <script type="text/ng-template" id="pkgWfView.html" >
        <td style="display :none"> {{pkg.packageId}}</td>   
        <td style="text-align:center;">{{$index+1}}</td>
        <td> {{pkg.packageName}}</td>   
         <td> {{pkg.clientName}}</td>   
</script>

</div>

Angularjs控制器代码：

$scope.wfPkgTblOpt = {
       //custom datatable options
        destroy: true,
     // "aLengthMenu": [[5,10,15,-1], [5, 10, 15,'All']],
      "bPaginate": true ,
      "bLengthChange": false,
      "autoWidth": false,
       "lengthChange": false,
      "pageLength": 5 ,

      };


$scope.getUserPackages = function(userId){
    console.log( "getUserPackages--for UserID--->"+userId);
          $http({
            method : "GET",
            url : "package/getPackages.htm",
            params:{'userId':userId}
        }).then(function mySuccess(response) {
            //console.log("pkgList "+JSON.stringify(response.data));
           $scope.pkgWFList = response.data;        

       var  pkgId = $scope.pkgWFList[0].packageId ;
            $scope.getWorkflow (pkgId);
            $scope.getVectors(pkgId);
        }, function myError(response) {
            $scope.danger(response.statusText);
        });

      };      

 $scope.getUserPackages($scope.userId); 

UI-路由器代码：

//Root state-3
      .state('workFlow', {
                name: 'workFlow',
                url: '/workFlow',
                views: {
                    lazyLoadView: {
                       // controller: 'WorkFlowController',
                        templateUrl: 
 'appResources/angular/view/workFlow.html'
                    }
                },
                resolve: {
                    loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
                             // returning string
                            return 

$ocLazyLoad.load('appResources/angular/controller/WorkFlowController.js');
                        }],
                    loadMyService: ['$ocLazyLoad', function 
 ($ocLazyLoad) {
                          // returning string
                            return 
 $ocLazyLoad.load('appResources/angular/service/WorkFlowService.js');
                        }],
                    load: function ( ) {
                      console.log("do something here ");
                    }
                } 

            }) 

有人能告诉我如何处理动态数据，其中将存在多个操作操作。

Answer 1

你好，使用Angularjs来满足您的需求，这样以后就不会有任何问题了。

请查看下面的链接，并尝试实现url中指定的数据表。

http://l-lin.github.io/angular-datatables/archives/#!/welcome