Jquery Datatables添加动态添加的页脚

时间:2016-02-24 12:26:15

标签: javascript jquery html css datatables

这是我的JQuery DataTable代码

$(function() {
    var collectionTable = $('#collection-list').dataTable({
        "bProcessing": true,
        "bServerSide": true,
        "sServerMethod": "GET",
        "fnFooterCallback": function(row, data, start, end, display) {
            var api = this.api(),
                data;

            // Remove the formatting to get integer data for summation
            var intVal = function(i) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '') * 1 :
                    typeof i === 'number' ?
                    i : 0;
            };

            //Sum all Amount of the retrieved tickets
            var total = 0;
            total = api
                .column(7)
                .data()
                .reduce(function(a, b) {
                    return intVal(a) + intVal(b);
                }, 0);
            //Update Footer
            $(api.column(7).footer()).html(
                total.toLocaleString('en-US', {
                    style: 'currency',
                    currency: 'PHP'
                })
            );
        },

        "sAjaxSource": "/report/retrieve/all",
        "fnServerParams": function(aoData) {
            aoData.push({
                "name": "startDate",
                "value": $('#target-from').val()
            });
            aoData.push({
                "name": "endDate",
                "value": $('#target-to').val()
            });
        },
        "columns": [{
            "data": "dateTimeCreated"
        }, {
            "data": "invoiceNumber"
        }, {
            "data": "customerName"
        }, {
            "data": "description",
            "className": "pre"
        }, {
            "data": "targetDate"
        }, {
            "data": "processStatus"
        }, {
            "data": "forCollection"
        }, {
            "data": "amount"
        }],
        dom: 'Bfrtip',
        buttons: [
            'copyHtml5',
            'pdfHtml5'

        ],
        "aoColumnDefs": [{
            "targets": 0,
            "data": "dateTimeCreated",
            "mRender": function(data) {
                return Date.create(data).format('{MM}-{dd}-{yyyy} {hh}:{mm}{TT}');
            }
        }, {
            "targets": 8,
            "className": 'text-center',
            "mRender": function(data, type, full) {
                var view = [
                    [@ {
                        /collection/view /
                    }]
                ] + full.id;
                var edit = [
                    [@ {
                        /collection/edit /
                    }]
                ] + full.id;
                return '<a sec:authorize="hasRole('
                ROLE_COLLECTION_VIEW ')" class="label label-primary" href="' + view + '"><i class="fa fa-file-text-o"></i></a> ' +
                    '<a sec:authorize="hasRole('
                ROLE_COLLECTION_EDIT ')" class="label label-warning" href="' + edit + '"><i class="fa fa-pencil"></i></a>'
            }
        }, {
            "targets": 4,
            "data": "targetDate",
            "mRender": function(data) {
                return Date.create(data).format('{MM}-{dd}-{yyyy} {hh}:{mm}{TT}');
            }
        }],
    });

    $("#search-collection-btn").click(function() {
        collectionTable.fnDraw();
    });

    $("#customer").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "/company/search",
                dataType: "json",
                data: {
                    term: request.term
                },
                success: function(data) {
                    response($.map(data, function(customer) {
                        return {
                            label: customer.name,
                            value: customer.name
                        }
                    }))
                }
            });
        },
        minLength: 2,
        change: function(event, ui) {
            if (!ui.item) {
                $("#customer").val("");
            }
        }
    });
});

这是我的标记/数据。

<table id="collection-list" class="no-border blue">
    <thead class="no-border">
        <tr>
            <th><strong>Date Created</strong></th>
            <th><strong>Invoice #</strong></th>
            <th><strong>Customer</strong></th>
            <th><strong>Item Description</strong></th>
            <th><strong>Target Date</strong></th>
            <th><strong>Status</strong></th>
            <th><strong>For Collection</strong></th>
            <th><strong>Amount</strong></th>
            <th class="text-center"><strong>Actions</strong></th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th>Total:</th>
        </tr>
    </tfoot>
    <tbody class="no-border-x no-border-y"></tbody>
</table>

但是,我在文档(https://datatables.net/reference/button/pdf)中读到,每当我生成pdf时,我都可以包含页脚。

但是,使用给定的代码,它不会显示带有页脚的pdf。

在这里,我在表格中的总值是通过我的页脚回调自动计算出来的。我怎么指定每次生成数据表的pdf时它应该包括表格页脚(哪些内容是通过我的回调计算的)?

0 个答案:

没有答案