DataTable多表格场景下导出按钮动态获取文件名与标题问题

这个问题的核心是你用了全局选择器$('.dt-table:visible')——当页面存在多个可见表格时，它只会返回第一个匹配的元素，自然没法对应到你点击导出按钮的那个表格。其实DataTables的按钮回调函数里已经提供了访问当前表格的上下文，我们可以利用这个来精准获取目标表格的属性。

下面是修改后的完整代码，关键修改点我会逐一说明：

var tableObj = $('.dt-table').DataTable({
    retrieve: true,
    "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, 'All'] ],
    "language": {
        "emptyTable": "No data available to show...",
        "info": "Showing _START_ to _END_ from _TOTAL_ records",
        "infoEmpty": "0 records to show...",
        "lengthMenu": "Show _MENU_ records",
        "loadingRecords": "Loading...",
        "processing": "Processing...",
        "zeroRecords": "No matching records found...",
        "infoFiltered": "(filtered from _MAX_ total records)"
    },
    dom: "<'row'<'col-sm-12'B>>" +
         "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
         "<'row'<'col-sm-12'tr>>" +
         "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
    buttons: {
        buttons: [
            {
                text: '<i class="far fa-file-excel pr-2"></i> Export to Excel(.xlsx)',
                title: function() {
                    // 拿到当前按钮绑定的表格DOM节点
                    var tableNode = this.table().node();
                    return $(tableNode).data('excel-title');
                },
                extend: 'excel',
                autoFilter: true,
                filename: function() {
                    var d = new Date($.now());
                    var n = d.getDate()+"_"+(d.getMonth()+1)+"_"+d.getFullYear()+"_"+d.getHours()+"_"+d.getMinutes()+"_"+d.getSeconds();
                    // 获取当前表格的filename属性
                    var tableNode = this.table().node();
                    return $(tableNode).data('excel-filename') + '_' + n;
                },
                customize: function(xlsx) {
                    var sheet = xlsx.xl.worksheets['sheet1.xml'];
                    // 同样通过按钮上下文获取当前表格节点
                    var tableNode = this.table().node();
                    $( 'sheets sheet', xlsx.xl['workbook.xml'] ).attr( 'name', $(tableNode).data('excel-title') );
                },
                exportOptions: {
                    format: {
                        body: function (data, row, column, node) {
                            if($(node).find(".notExportable").length) {
                                return $(data).remove(".notExportable").html();
                            } else {
                                return data;
                            }
                        }
                    },
                    columns: ':not(.notExportable)'
                }
            }
        ],
        dom: {
            container: { tag: "div", className: "mb-2 mlmt-act dt-buttons" },
            button: { tag: "a", className: "btn btn-info mlmt-button" },
            buttonLiner: { tag: null }
        }
    },
    drawCallback: function() {
        var api = this.api();
        var hasRows = api.rows({ filter: 'applied' }).data().length > 0;
        // 简化表格ID的获取方式
        var tableId = api.table().node().id;
        var excelButton = $('a.mlmt-button[aria-controls="'+tableId+'"]');
        if(hasRows) {
            excelButton.removeAttr('style');
        } else {
            excelButton.css('pointer-events', 'none').css('background-color', 'gray');
        }
    }
});

关键修改说明： #

1. 利用按钮上下文获取当前表格：
   在title、filename、customize这些按钮回调函数中，this指向的是当前点击的按钮实例。通过this.table()可以获取该按钮绑定的表格API，再调用.node()就能拿到对应表格的DOM元素，这样就能精准读取当前表格的data-excel-title和data-excel-filename属性，完全不会和其他表格混淆。

2. 简化drawCallback中的表格ID获取：
   原代码中this.api().tables().nodes().to$().attr('id')会获取所有表格的ID，这里改成api.table().node().id，直接获取当前触发draw事件的表格ID，逻辑更清晰准确。

这样修改后，每个导出按钮都会严格对应自己所属的表格，不管页面有多少个DataTable实例，导出的文件名和标题都会正确匹配。

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