AngularJs를 사용하여 Jquery Datatable을 사용하여 테이블을 내보내기하는 방법

Question

저는 테이블의 데이터를 pdf로 내보내는 각도 웹 사이트에서 작업하고 있습니다.

나는 그것이합니다 alse이 오류 "오류 : [$ 주입기 : unpr]"검색 및 정렬하지만, 점점, 페이징과 같은 몇 가지 더 많은 기능을 추가로 대한의 jQuery datatables를 사용하려면 브라우저의 콘솔에서, 심지어 내가 아니에요을 ng-table을 사용하면 데이터 가능 여부가 결정됩니다.

또한 jquery 플러그인 pdfmake을 사용해 보았지만 signle page pdf 만 만들었고 테이블에 더 큰 데이터가 있으면 실패했습니다. 도와주세요. .

HTML : -

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.min.css"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.min.js"></script> 

      <table id="myYealyGrid" ng-class="myYealyGridClass" class="table table-responsive gridtable" ng-table="yearly_Table"> 
       <thead> 
        <tr> 
         <th>Customer Name</th> 
         <th>Year</th> 
         <th>Total Amount($)</th> 
        </tr> 
       </thead> 
       <tbody> 

        <tr ng-show="YearlyReport.length !=0" ng-repeat="reportrow in YearlyReport" ng-init="setTotal(reportrow)"> 
         <td>{{reportrow.CustomerName}}</td> 
         <td>{{reportrow.Month}}</td> 
         <td>{{reportrow.TotalAmount}}</td> 
        </tr> 

        <tr ng-show="YearlyReport.length ==0"> 
         <td><small class="nodata">No data found.</small></td> 
         <td></td> 
         <td></td> 
        </tr> 
       </tbody> 
       <tfoot> 
        <tr ng-show="YearlyReport.length !=0" class="bg-warning"> 
         <td class="td-font-bold-custm">Total</td> 
         <td></td> 
         <td class="td-font-bold-custm">{{gridTotalAmount | number:2}}</td> 
        </tr> 
       </tfoot> 
      </table> 

AngularJS와 -

var appKitchenOrderReport = angular.module("myKitchenOrderReportApp", ['ngTable']); 

appKitchenOrderReport.controller("myKitchenOrderReportCntrl", function ($scope, $window, $timeout, myKitchenOrderReportService, ngTableParams) { 

    var getData = myKitchenOrderReportService.SearchData($scope.CustomerName, $scope.Year); 
     getData.then(function (kitchenreportdata) { 

var yearlyGridData = kitchenreportdata.data.OrderYearlyReport; 
       $scope.yearly_Table = new ngTableParams({ 
        page: 1, 
        count: 10 
       }, { 
        total: $scope.yearlyGridData.length, 
        getData: function ($defer, params) { 
         $scope.YearlyReport = $scope.yearlyGridData.slice((params.page() - 1) * params.count(), params.page() * params.count()); 
         $defer.resolve($scope.YearlyReport); 
        } 
       }); 
}, function() { 
      alert('Error in getting data'); 
     }); 

}); 


appKitchenOrderReport.service("myKitchenOrderReportService", function ($http) { 

    this.getKitchenOrderReportData = function() {   
     var response = ''; 
     return $http.get("GetOrderReport"); }; 

    this.SearchData = function (CustomerName, Year) 
    {   
     var GetParams = new Object();   
     GetParams.CustomerName = CustomerName;   
     GetParams.Year = Year 

     var response = $http({ 
      method: "post", 
      url: "GetOrderReport", 
      data: '{model: ' + JSON.stringify(GetParams) + '}',   
     }); 
     return response; 
    } 
}); 

Answer 1

당신이 $ ('#의 myYealyGrid')을 사용할 수 있습니다

의 DataTable(); 데이터 테이블을 초기화합니다.

하지만 HTML 표에 데이터를 넣으면 befor 만 사용하십시오.

자동으로 데이터 테이블을 초기화합니다.

시도해보고 작동 여부를 알려주세요.