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

Question

您好，我正在使用带有 angularJs 参考站点的 jquery dataTable： https://codepen.io/kalaiselvan/pen/rLoVkE 这对于静态数据很好，但我正在绑定数据库中的数据 它的创建问题。数据显示我没有可用的数据消息。我是 将 UI Router 用于单页应用程序。

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 doc 中指定的数据表。

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