javascript - 加载后 jQuery DataTables 按钮触发导致无限循环

Question

我有一个数据表，可以根据用户检查的内容过滤列。

我希望用户能够导出他们当前在数据表上看到的内容。因此，我在每个复选框上都有一个 data-column 属性，它让我知道应该根据是否选中来显示或隐藏哪一列。

我已经像这样初始化了我的表:

var table = $('.my-table').DataTable({
        pageLength:25,
        fixedHeader: true,
        sScrollX: true,
        dom: '<"html5buttons"B>lTfgitp',
        buttons: [
            {extend: 'copy'},
            {extend: 'csv', 
                title: 'Testing',
                exportOptions: {
                    columns: get_columns_to_export(),
                    rows: { selected: true }
                },
                'customize': function(doc){
                    console.log("==CSV DOC==");
                    console.log(doc);
                }
            },
            {extend: 'excel', 
                title: 'Testing',
                exportOptions: {
                    columns: get_columns_to_export(),
                    rows: { selected: true }
                },
                'customize': function(doc){
                    console.log("==EXCEL DOC==");
                    var sheet = doc.xl.worksheets['sheet1.xml'];
                    console.log(sheet);
                }
            },
            {extend: 'print',
                customize: function (win){
                    $(win.document.body).addClass('white-bg');
                    $(win.document.body).css('font-size', '10px');

                    $(win.document.body).find('table')
                            .addClass('compact')
                            .css('font-size', 'inherit');
                }
            }
        ]
});

函数get_columns_to_export仅返回可见列的编号列表，这实际上有效，但仅在页面加载时有效。

如果我取消隐藏某些列(以便 get_columns_to_export() 返回包含额外数字的不同数组)，导出的文件将仅包含在表加载时找到的原始列。

我查找了如何再次触发按钮，但现在遇到了这样的问题:在 JS 耗尽堆栈大小之前，DataTables 会出现无限循环。

从 DataTables 文档中，我正在使用 button.trigger() 发现 here具有以下内容:

$('.buttons-excel').on('click',function(){
    table.button('.buttons-excel').trigger();
});

这会导致无限循环发生。我还尝试在触发操作之后添加一个 return 语句，但由于某种原因它会忽略这一点并直接进入我在原始声明中声明的原始 customize 函数表。

如何才能使用正确的列号更新数据表，同时又不会陷入无限循环？

Answer 1

将导出选项部分更改为

exportOptions: {
                    columns: get_columns_to_export.bind(this),
                    rows: { selected: true }
                },

数据表列选择器可以采用各种选项，其中包括字符串或函数。

在原始示例中，您在编译时调用函数 get_columns_to_export() 一次，该函数返回列的初始状态，即分配给列选择器的状态。

因为您的列是动态的，所以您希望使用列选择器的函数形式，每次执行按钮操作时都会调用该函数形式。

无限循环是由于您触发触发函数调用的单击函数中的按钮而触发的。摆脱它以停止循环。