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

Posted 2023-05-09

【中文标题】如何使用带有 AngularJs 的 Jquery Datatable 导出表

【英文标题】：How to use Jquery Datatable with AngularJs to export table

【发布时间】：2018-06-04 21:39:21

【问题描述】：

我正在开发需要将表格数据导出为 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;
    
);

【问题讨论】：

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

【参考方案1】：

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

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

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

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

【讨论】：

$('#myYealyGrid').DataTable(); var yearlyGridData = kitchenreportdata.data.OrderYearlyReport;

什么是错误以及您在哪里使用过我的意思是在渲染表格之后或之前

在渲染数据之前，它会创建数据表，没有错误但排序，分页不起作用...

是的，我明白了，正确检查列，th 的数量应该与 td 标签的数量匹配..

让我们continue this discussion in chat。