如何在使用数据表导出按钮和服务器端处理时导出所有行而不是当前显示的行

问题描述 投票:0回答:1

我目前遇到一个挑战,我的数据表导出按钮仅导出前 10 行或当前可见的行,而不是使用搜索栏导出所有数据或筛选数据。换句话说,它只导出DataTable第一页中的数据。

以下是我尝试过但仍然徒劳的:

        var table = $('#dt_payment_records').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('fees_management.payment_records.index') }}",
            columns: [
                {data: 'DT_RowIndex', orderable: false, searchable: false},
                {data: 'student.admission_no', name: 'student.admission_no'},
                {
                    data: null,
                    render: function(data, type, row) {
                        if (data.student.middle_name !== null) {
                            return data.student.first_name + " " + data.student.middle_name + " " + data.student.last_name;
                        } else {
                            return data.student.first_name + " " + data.student.last_name;
                        }
                    },
                    name: 'student_id',
                },
                {data: 'year', name: 'year'},
                {data: 'term', name: 'term'},
                {data: 'class.class_name', name: 'class_id'},
                { 
                    data: 'total_amount', 
                    name: 'total_amount',
                    render: $.fn.dataTable.render.number(',', '.', 0, '')
                },
                { 
                    data: 'amount_paid', 
                    name: 'amount_paid',
                    render: $.fn.dataTable.render.number(',', '.', 0, '')
                },
                { 
                    data: 'balance', 
                    name: 'balance',
                    render: $.fn.dataTable.render.number(',', '.', 0, '')
                }
            ],
            dom: 'Bfrtip', // Include Buttons extension
            buttons: [
                {
                    extend: 'copyHtml5',
                    text: '<i class="fa fa-copy"></i> Copy',
                    className: 'btn btn-default',
                },
                {
                    extend: 'excelHtml5',
                    text: '<i class="fa fa-file-excel"></i> Excel',
                    className: 'btn btn-default',
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fa fa-file-pdf"></i> PDF',
                    className: 'btn btn-default',
                },
                {
                    extend: 'print',
                    text: '<i class="fa fa-print"></i> Print',
                    className: 'btn btn-default',
                }
            ]
        });

我的期望是导出所有数据或选择的数据,但仅导出数据表第一页上的数据。 请注意,虽然我没有使用服务器端处理,但这些按钮工作得很好,但由于我正在处理大量数据,所以我选择了服务器端,现在按钮无法正常工作。

php ajax laravel datatables
1个回答
0
投票

我得到了解决方案,我想我会在这里分享: 在 .ready 函数中创建此函数;

  function newexportaction(e, dt, button, config) {
            var self = this;
            var oldStart = dt.settings()[0]._iDisplayStart;
            dt.one('preXhr', function (e, s, data) {
                // Just this once, load all data from the server...
                data.start = 0;
                //data.length = 2147483647;
                data.length = dt.page.info().recordsTotal;
                dt.one('preDraw', function (e, settings) {
                    // Call the original action function
                    if (button[0].className.indexOf('buttons-copy') >= 0) {
                        $.fn.dataTable.ext.buttons.copyHtml5.action.call(self, e, dt, button, config);
                    } else if (button[0].className.indexOf('buttons-excel') >= 0) {
                        $.fn.dataTable.ext.buttons.excelHtml5.available(dt, config) ?
                            $.fn.dataTable.ext.buttons.excelHtml5.action.call(self, e, dt, button, config) :
                            $.fn.dataTable.ext.buttons.excelFlash.action.call(self, e, dt, button, config);
                    } else if (button[0].className.indexOf('buttons-csv') >= 0) {
                        $.fn.dataTable.ext.buttons.csvHtml5.available(dt, config) ?
                            $.fn.dataTable.ext.buttons.csvHtml5.action.call(self, e, dt, button, config) :
                            $.fn.dataTable.ext.buttons.csvFlash.action.call(self, e, dt, button, config);
                    } else if (button[0].className.indexOf('buttons-pdf') >= 0) {
                        $.fn.dataTable.ext.buttons.pdfHtml5.available(dt, config) ?
                            $.fn.dataTable.ext.buttons.pdfHtml5.action.call(self, e, dt, button, config) :
                            $.fn.dataTable.ext.buttons.pdfFlash.action.call(self, e, dt, button, config);
                    } else if (button[0].className.indexOf('buttons-print') >= 0) {
                        $.fn.dataTable.ext.buttons.print.action(e, dt, button, config);
                    }
                    dt.one('preXhr', function (e, s, data) {
                        // DataTables thinks the first item displayed is index 0, but we're not drawing that.
                        // Set the property to what it was before exporting.
                        settings._iDisplayStart = oldStart;
                        data.start = oldStart;
                    });
                    // Reload the grid with the original page. Otherwise, API functions like table.cell(this) don't work properly.
                    setTimeout(dt.ajax.reload, 0);
                    // Prevent rendering of the full data to the DOM
                    return false;
                });
            });
            // Requery the server with the new one-time export settings
            dt.ajax.reload();
        };

下面是该功能的实现方式;

dom: 'Bfrtip', // Include Buttons extension
            buttons: [
                {
                    extend: 'copyHtml5',
                    text: '<i class="fa fa-copy"></i> Copy',
                    className: 'btn btn-default btn-sm',
                    "action": newexportaction
                },
                {
                    extend: 'excelHtml5',
                    text: '<i class="fa fa-file-excel"></i> Excel',
                    className: 'btn btn-success btn-sm',
                    "action": newexportaction
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fa fa-file-pdf"></i> PDF',
                    className: 'btn btn-danger btn-sm',
                    exportOptions: {
                        columns: ':not(.no-print)' 
                    }, // Exclude columns with the class 'no-print'
                   /*  orientation: 'landscape', // Set orientation to landscape
                    pageSize: 'LEGAL', // Optionally set the page size */
                    "action": newexportaction
                },
                {
                    extend: 'print',
                    text: '<i class="fa fa-print"></i> Print',
                    className: 'btn btn-secondary btn-sm',
                    "action": newexportaction
                }
            ]

通过上述操作,现在我可以轻松导出所有数据或选择的数据。

谢谢你

© www.soinside.com 2019 - 2024. All rights reserved.