Laravel Datatables基于用户筛选数据自定义导出Excel文件的实现问题

您好，我需要基于用户筛选后的Datatable数据导出文件，示例如下：

我已经完成了全量行的Excel导出功能，现在需要实现基于筛选后数据的导出，以下是我写在index.blade.php中的筛选function()：

$(".filterButton").on('click', function(){
    tableMediaOrder.column(8).search($('.input-advertiser-filter').val()).draw();
    tableMediaOrder.column(7).search($('.input-agency-filter').val()).draw();
    tableMediaOrder.column(9).search($('.input-brand-filter').val()).draw();
});

我尝试参考了Datatables官方的格式化示例，但不知道如何配置导出按钮，将Excel导出功能封装为自定义<a href="">标签，有没有人可以提供实现示例？非常感谢。

编辑补充 #

以下是我在index.blade.php中的页面元素代码：

<div class="col">
    <button id="filterButton" class="btn btn-primary filterButton"><i class="fa fa-filter"></i> 筛选</button>
    <div class="dropdown d-inline">
        <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-file-excel-o"></i>  导出
        </button>
        <!-- dropdown-menu -->
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="export-choose">
            <a class="dropdown-item export-link" id="export-filtered">Excel</a>
            <a class="dropdown-item export-link" href="{{ route('media-order.export') }}" id="exportRaw">Excel Raw</a>
        </div>
        <!-- end dropdown-menu -->
        <button class="btn btn-primary float-right" data-toggle="modal" data-target="#addMediaOrderModal" data-backdrop="static" data-keyboard="false" class="btn btn-primary">
            <i class="fa fa-plus-square mr-1"></i> 新增订单
        </button>
    </div><!-- dropdown -->
</div>

目前我尝试让<a href="" id="export-filtered">作为导出按钮，给它绑定onClick="exportFiltered"事件并写入JavaScript逻辑，但功能没有生效，以下是我的JavaScript代码：

$(".exportFiltered").on('click', function(e) {
    $('.hiddenbuttons button').eq(0).click();
});

但遗憾的是功能没有生效，导出的Excel文件是空白的。

更新：Datatable配置代码 #

以下是我的Datatable初始化代码：

'use strict';

var addMediaOrderSubmitButton = Ladda('#addMediaOrderSubmitButton');
var editMediaOrderSubmitButton = Ladda('#editMediaOrderSubmitButton');

var tableMediaOrder = dt('#dt-media-order','media_order',{
    // dom: '<"hiddenbuttons"B>rtip',
    processing: true,
    serverside: true,
    iDisplayLength: 100,
    bFilter: true,
    searchable: true,
    exportOptions: {
        rows: 'visible'
    }, 

    ajax: {
        url: "{{ route('media-order.index') }}?dt=1",
        data: function (d){
            d.filter_order = $('#input-order-filter').val();
            d.filter_agency = $('#input-agency-filter').val();
            d.filter_advertiser = $('#input-advertiser-filter').val();
            d.filter_brand = $('#input-brand-filter').val();
            // d.filter_start = $('#input-start-date').val();
            // d.filter_end = $('#input-end-date').val();
            //d.filterButton = $('#filterButton').val();
        },
    },

    columns: [
        {
            data: 'action', 
            name: 'action',
            orderable: false, 
            sortable: false, 
            className: 'text-center'
        },
        {data: 'nomor', name: 'nomor'},
        {data: 'nomor_reference', name: 'nomor_reference'},
        {
            data: 'periode_start', 
            name: 'periode_start',
            render: function(data){
                var date = new Date(data);
                var month = date.getMonth() + 1;
                return (month.toString().length > 1 ? month : "0" + month) + "/" + date.getDate() + "/" + date.getFullYear();
            }
        },
        {
            searchable: true, 
            data: 'periode_end', 
            name: 'periode_end',
            render: function(date){
                var date = new Date(date);
                var month = date.getMonth() + 1;
                return (month.toString().length > 1 ? month : "0" + month) + "/" + date.getDate() + "/" + date.getFullYear();
            }
        },
        {
            searchable: true, 
            data: 'category_id', 
            name: 'category_id',
            render: function(data, type, row) {
                switch (data) {
                    case '1':
                        return 'New Order';
                        break;
                    case '2':
                        return 'Additional Order';
                        break;
                    case '3':
                        return 'Cancel Order';
                        break;
                    case '4':
                        return 'Paid';
                        break;
                    case '5':
                        return 'Bonus';
                        break;
                    default:
                        return 'Null';
                        break;
                }
            }
        },
        {
            searchable: true, 
            data: 'type_id', 
            name: 'type_id',
            render: function(data, type, row) {
                switch (data) {
                    case '1':
                        return 'Reguler';
                        break;
                    case '2':
                        return 'Reguler PIB';
                        break;
                    case '3':
                        return 'CPRP';
                        break;
                    case '4':
                        return 'Package';
                        break;
                    case '5':
                        return 'Sponsor';
                        break;
                    case '6':
                        return 'Blocking';
                        break;
                    default:
                        return 'Null';
                        break;
                }
            }
        },
        {
            searchable: true, 
            data: 'agency_name', 
            name: 'agency_name' 
        },
        {
            searchable: true, 
            data: 'advertiser_name', 
            name: 'advertiser_name' 
        },
        {
            searchable: true, 
            data: 'brand_name', 
            name: 'brand_name' 
        },
        {
            searchable: true, 
            data: 'version_code', 
            name: 'version_code' 
        },
        {
            data: 'gross_value', 
            name: 'gross_value' ,
            render: $.fn.dataTable.render.number( ',', '.', 2, 'Rp','' )
        },
        {
            data: 'nett_budget', 
            name: 'nett_budget',
            render: $.fn.dataTable.render.number( ',', '.', 2, 'Rp','' ) 
        },
        {
            data: 'nett_cashback', 
            name: 'nett_cashback',
            render: $.fn.dataTable.render.number( ',', '.', 2, 'Rp','' ) 
        },
        {
            data: 'nett_bundling', 
            name: 'nett_bundling',
            render: $.fn.dataTable.render.number( ',', '.', 2, 'Rp','' )
        },
        {data: 'spot', name: 'spot' },
        {
            searchable: true, 
            data: 'accountexecutive_name', 
            name: 'accountexecutive_name' 
        },
        {
            searchable: true, 
            data: 'userto_name', 
            name: 'userto_name' 
        },
        {
            searchable: true, 
            data: 'group_id', 
            name: 'group_id' 
        },
        {data: 'notes', name: 'notes' },
        {
            searchable: true, 
            data: 'attachment_name', 
            name: 'attachment_name' 
        }
    ],
    buttons: [
        { // 仅导出筛选后的数据
            extend: 'excelHtml5',
            exportOptions: {
                modifier: { search: 'applied' }
            }
        }, 
        { // 导出全量数据，忽略筛选条件
            extend: 'excelHtml5',
            exportOptions: {
                modifier: { search: 'none' }
            }
        }
    ],

    initComplete: function(setting, json){
        $('.hiddenbuttons').css('display','none');
    },

    rowCallback: function( row, data, index) {
        if (data.isdisabled == 1){
            $(row).css('background-color', 'rgba(255, 0, 0, 0.2)');
        }
    }
});

更新2 #

我发现之前遗漏了引入以下依赖：

<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>

另外我想知道有没有办法自定义导出列，现在导出的文件包含了“Action”列，效果如下：

但遗憾的是自定义导出<a href="" id="export-filtered">仍然没有生效。

更新3：最终解决方案 #

经过搜索和调试，最终找到了如下解决方案：

var buttons = new $.fn.dataTable.Buttons(tableMediaOrder, {
    buttons: [
        {
            extend: 'excelHtml5',
            exportOptions: {
                columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
                modifier: { search: 'applied' }
            }
        }
    ]
}).container().appendTo($('#exportFiltered'));

最终可以使用以下标签作为外部导出链接：

<a href="#" class="dropdown-item" id="exportFiltered"></a>

即可实现筛选后数据的Excel导出功能。

内容的提问来源于stack exchange，提问作者Vtych