如何使用带有 AngularJs 的 Jquery Datatable 导出表

Question

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

我想为它使用 jQuery 数据表，因为它还添加了一些更多功能，例如分页、搜索和排序，但是在浏览器的控制台上出现此错误 "Error: [$injector:unpr]"，即使我不确定使用 ng-table 是否会使其成为数据表。

我也尝试过使用 jquery 插件pdfmake，但它只会使signle page 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

你可以使用 $('#myYealyGrid').DataTable();初始化你的数据表。

但在将数据放入 HTML 表时，仅使用 befor。

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

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