CODEWITHSUNDEEP
javascriptjquerydatatables
Alex
Alex

Reputation: 2299

jQuery DataTables button trigger after load results in an infinite loop

I have a dataTable that can have columns filtered based on what the user checks.

I want the user to be able to export what they currently see on the dataTable. So I have a data-column attribute on each checkbox which lets me know which column should be shown or hidden based on whether or not it is checked.

I have initialized my table like this:

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');
                }
            }
        ]
});

The function get_columns_to_export just returns the numbered list of columns that are visible, and this actually works, but only on page load.

If I unhide some columns (so that get_columns_to_export() returns a different array containing an extra number), the exported file will only contain the original columns that it found on table load.

I looked up how to trigger the button again, but am now running into issues where DataTables has an infinite loop before JS runs out of stack size.

From the DataTables documentation, I'm using button.trigger() found here with the following:

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

This causes the infinite loop to occur. I've also tried adding a return statement after the trigger action, but for some reason it ignores this and goes directly into the original customize function that I declared in the original declaration of table.

What can I do to update DataTables with the correct column numbers while not ending up in an infinite loop?

Upvotes: 0

Views: 1379

Answers (1)

fluoresce
fluoresce

Reputation: 452

Change the exportOptions sections to be

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

Datatables column selectors can take various options, among them a string or a function.

In your original example, you are calling the function get_columns_to_export() once at compile time, and this function returns the initial state of the columns which is what is being assigned to the column selector.

Because your columns are dynamic, you want to use the function form of the column selector, which will be called every time the button action is executed.

The infinite loop is being triggered by the fact that you are triggering the button in the click function which is called by the trigger function. Get rid of this to stop the looping.

Upvotes: 1

Related Questions