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

时间:2018-05-14 16:00:44

标签: jquery angularjs ajax dynamic datatable

您好我正在使用带有angularJs参考站点的jquery dataTable:       https://codepen.io/kalaiselvan/pen/rLoVkE  这适用于静态数据,但我从数据库绑定数据     它的创造问题。数据显示我没有数据可用消息。我是         使用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-Router代码:

//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 ");
                    }
                } 

            }) 

有些机构可以告诉我如何使用多个动态数据  操纵操作将在那里。

1 个答案:

答案 0 :(得分:3)

您好使用Angularjs数据表来满足您的要求,这样您将来不会遇到任何问题

请检查以下链接并尝试实施网址文档中指定的数据表。

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