AngularJsでJquery Datatableを使用してテーブルをエクスポートする方法

Question

私は、テーブルのデータをpdfにエクスポートする必要がある角度のあるWebサイトで作業しています。

私は検索やソート、それはalseページングのようないくつかのより多くの機能を追加すると、それのためのjQueryのDataTableを使用したいが、このエラー「エラー：[$インジェクター：UNPR]」きブラウザのコンソール上に、でも私はないですng-tableを使用すると、データ可能かどうかを確認できます。

jqueryプラグインpdfmakeを使用してみましたが、signleページ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を使用します。

自動的にデータテーブルを初期化します。

試してみてください。それが動作しているかどうかは教えてください。