Question

我正在开发angular网站，我需要将表格数据导出为pdf。

我想使用jQuery数据表，因为它还增加了一些功能，如分页，搜索和排序，但在浏览器的控制台上收到此错误“错误：[$ injector：unpr] ”，即使我不确定使用 ng-table 是否可以使其成为数据表。

我也尝试过使用jquery插件pdfmake，但它只会使signle页面pdf失败并且如果表有更大的数据则失败。请帮忙和TIA。

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

你可以使用$（＆＃39; #myYealyGrid＆＃39;）。DataTable（）;初始化数据表。

但是，只需将数据放入HTML表格即可。

它会自动初始化您的数据表。

尝试一下，让我知道它是否有效。

如何使用Jquery Datatable和AngularJs导出表

1 个答案: