Jquery Data table reloading issue when using with angularjs dynamic data

Question

Hi i am using jquery dataTable with angularJs reference site is : https://codepen.io/kalaiselvan/pen/rLoVkE This is fine for static data, but i am binding data from data base then its creating issue. Data is showing me with no data available message.I am using UI Router for single page application.

HTML CODE :

<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 Controller Code :

$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 code :

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

            })

Can some body tell me how i can work with dynamic data in which multiple manipulation operations will be there.

Thanks in advance. As per my observation Jquery datatable is initializing before data is getting loaded into $scope.pkgWFList array. and Jquery datatable is not refreshing by new data. — Devendra Singraul
– Devendra Singraul, Commented May 14, 2018 at 16:04

Siddharth Sarfale · Accepted Answer · 2018-05-14 16:07:49Z

2

Hello use Angularjs datatable to fulfill your requirements so you won't get any issues in future

Please check with below link and try to implement datatable specified in url doc.

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

answered May 14, 2018 at 16:07

Siddharth Sarfale

945 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Devendra Singraul Over a year ago

Thanks for reply but i was trying this and facing issue : DTOptionsBuilder, DTColumnBuilder injection problem. angular-data table library is not resolving that. Can you provide me any plunker view

Siddharth Sarfale Over a year ago

I think you might have done some mistake to put required files that's why you had faced that issue. As I have already implemented that in one of my project and it's working fine for me

Collectives™ on Stack Overflow

Jquery Data table reloading issue when using with angularjs dynamic data

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related