数据表按钮 - 来自 angular 的数据

Question

我正在使用 JQuery 数据表按钮在我的页面上显示数据（因为它具有复制到剪贴板/导出到 CSV/打印等项目的功能。然后，从服务器，我正在使用 angular js。

问题是从 angular ng-repeat 呈现的数据在调用 copy/csv/print/etc 等数据表按钮时不会出现，但这些项目在页面上显示得很好。但是对于我包含的静态虚拟数据，它正在由按钮处理。

以下是代码片段：

摘自页面：

                            <table id="datatable-buttons" class="table table-striped table-bordered ng-cloak">
                                <thead>
                                <tr>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Job</th>
                                    <th>Location</th>
                                    <th>Age</th>
                                    <th>Date Hired</th>
                                    <th>Email</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>Donna</td>
                                    <td>Snider</td>
                                    <td>Customer Support</td>
                                    <td>New York</td>
                                    <td>27</td>
                                    <td>2011/01/25</td>
                                    <td>d.snider@datatables.net</td>
                                </tr>
                                <tr ng-repeat="person in persons">
                                    <td>{{person.fname}}</td>
                                    <td>{{person.lname}}</td>
                                    <td>{{person.job}}</td>
                                    <td>{{person.location}}</td>
                                    <td>{{person.age}}</td>
                                    <td>{{person.date_hired}}</td>
                                    <td>
                                        <div ng-show="person.email == null">N/A</div>
                                        <div ng-show="person.email != null">{{person.email}}</div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>

...

<script>
    $(document).ready(function() {
        var handleDataTableButtons = function() {
            if ($("#datatable-buttons").length) {
                $("#datatable-buttons").DataTable({
                    dom: "Bfrtip",
                    buttons: [
                        {
                            extend: "copy",
                            className: "btn-sm"
                        },
                        {
                            extend: "csv",
                            className: "btn-sm"
                        },
                        {
                            extend: "excel",
                            className: "btn-sm"
                        },
                        {
                            extend: "pdfHtml5",
                            className: "btn-sm"
                        },
                        {
                            extend: "print",
                            className: "btn-sm"
                        },
                    ],
                    responsive: true
                });
            }
        };

        TableManageButtons = function() {
            "use strict";
            return {
                init: function() {
                    handleDataTableButtons();
                }
            };
        }();

        $('#datatable').dataTable();

        $('#datatable-keytable').DataTable({
            keys: true
        });

        $('#datatable-responsive').DataTable();

//        $('#datatable-scroller').DataTable({
//            ajax: "js/datatables/json/scroller-demo.json",
//            deferRender: true,
//            scrollY: 380,
//            scrollCollapse: true,
//            scroller: true
//        });

        $('#datatable-fixed-header').DataTable({
            fixedHeader: true
        });

        var $datatable = $('#datatable-checkbox');

        $datatable.dataTable({
            'order': [[ 1, 'asc' ]],
            'columnDefs': [
                { orderable: false, targets: [0] }
            ]
        });
        $datatable.on('draw.dt', function() {
            $('input').iCheck({
                checkboxClass: 'icheckbox_flat-green'
            });
        });

        TableManageButtons.init();
    });
</script>

如有任何帮助，我们将不胜感激。 TIA

Answer 1

上面的代码似乎煮过头了 :) 到底为什么要这么扭曲？ jQuery 和 angular 的混合通常是一个非常糟糕的主意。存在种族问题，您根本不能依赖任何 $(document).ready。事实上，$(document).ready() 或多或少会在 angular 处理其业务的同时被解雇——比如处理 ng-repeat 的 ...

真正的解决方案是使用 angular directives for dataTables。

短期解决方案是跳过巧妙的就绪和完整性检查流程：

$(document).ready(function() {
    var handleDataTableButtons = function() {
        if ($("#datatable-buttons").length) {
            $("#datatable-buttons").DataTable({

只是糟糕的编码，在 jQuery 上下文中也是如此 - 没有冒犯，一直在那里 :) 改用 $timeout，这将确保初始化 table在稍后的 digest 中，这将是 table 由 ng-repeat 呈现的时间：

$timeout(function() {
   $("#datatable-buttons").DataTable({
   ...
   })
})

会起作用。

数据表按钮 - 来自 angular 的数据

datatable buttons - data from angular

jquery

angularjs

datatable

datatables

angular-datatables