Overriding excel button action

mahuss · February 27

Hello,

I guess this really naive question, but I apparently can't handle the issue on my own

I try to override the "excel" button action (just want to reload table before the export)

but I can't use neither:

 $.fn.dataTable.ext.buttons.excelHtml5.action(e, dt, button, config);

since console shows me:

buttons.html5.min.js:8 Uncaught TypeError: this.processing is not a function at Object.action (buttons.html5.min.js:8:19201)

nor:

 $.fn.dataTable.ext.buttons.excel.action(e, dt, button, config);

as it seems it does not exist at all...

please take a look at part of the code below:

                    buttons: [ {
                        title: null,
                        text: 'Export XLS',
                        extend: 'excel',
                        autoFilter: true,
                        sheetName: 'sheet',
                        filename: `excel-${currentDate}`,
                        ....

                        action: function(e, dt, button, config) {
                            
                            $('#table').DataTable().ajax.reload();                            
                            
                            $.fn.dataTable.ext.buttons.excelHtml5.action(e, dt, button, config);
                        },

Which $.fn.dataTable.ext.buttons.xxxxx.action() should be utilized in this case?

Could someone direct me, please?

allan · February 27

The problem is the scope of execution. If you have a look at the last example on the buttons.buttons.action reference page you'll see that it uses .call to set the scope.

 $.fn.dataTable.ext.buttons.excelHtml5.action.call(this, e, dt, button, config);

Well, actually, you want to put it inside a callback function for ajax.reload(), otherwise, it won't wait for your new data to be loaded!

Allan

mahuss · February 29

Yes: perfectly to the point. I really appreciate your advice and I am grateful for your help. However a little thing makes me a bit worried now.

I've followed your advice and my excel looks perfectly same as the Datatables (even if some ajax things happens and affect the values beforehand) but ajax.reload seems to reset all filters.
Is there any way too keep them? Maybe any similar function exists?

allan · February 29

It shouldn't. I'll need a link to a test case showing the issue to be able to debug it.

Allan

mahuss · March 1

It seems you are right, I've prepared the test case, but in, let's say, standard conditions filters are kept. Exactly like you said.

Unfortunately it's difficult to start the test case with a real code (django+ajax database requests)

I use there customized filters/sorting like for example below sorting, triggered from initComplete:

initComplete: function(settings, json) {

  // there are two links asc/desc with class .sort
$(".sort").click((evt) => {
   var el = evt.target.id === "" ? evt.target.parentElement : evt.target
   sortClick(el);

});
},

and this triggers:

const ordering_names = {
    'az': 'asc',
    'za': 'desc',
};
sortClick = (t) => {
    col = $(t).prop('id').substring(2);
    const ord = ordering_names[$(t).prop('id').slice(0,2)];
    dt.order( [ col, ord ] ).draw();
};

and this sorting disapears (table is just reorganized) after $('#table').DataTable().ajax.reload() is invoked.

I am aware that this information is incomplete, and it would be really tough to debug the reason only with above part of code,
so I will simply share what's the reason when I debug the issue myself (if I succeed ).

Thank you for the consultation!

kthorngren · March 1

Maybe you can post your full Datatables initialization code.

Possibly you have drawCallback or draw that, when called, might clear the filters. The only filter under Datatables control is the default global search input. Any other column search filters you may have are configured and controlled by custom code. Is it thees filters or the default search input that are cleared?

Kevin

mahuss · March 4

No Idea what can be wrong, but it is for sure a bug in my code.
I've prepared a test case based on my code

https://live.datatables.net/wonupemu/7/edit

and ajax.reload() does not make such a mess as it happens in my local environment. Here it seems to work properly (???)

I also considered that the Datatables version (I use 1.10.14) can be the reason, but it seems not.

@kthorngren : default search input is kept as before ajax.reload(). Just coustomized filters reset.

There is also no drawCallback (option) or draw (event) in use (or at least I can't investigate this )

I think you can't help me when the testcase works fine so I will share the reason if only I find it

kthorngren · March 4

Your test case wasn't quite right. The buttons.buttons.action was inside the exportOptions so it wasn't executing. I moved outside and now it executes. However I'm seeing this error:

Uncaught (in promise) TypeError: cb is not a function
at buttons.html5.js:1443:5

Which is this code:

        if (zip.generateAsync) {
            // JSZip 3+
            zip.generateAsync(zipConfig).then(function (blob) {
                _saveAs(blob, filename);
                cb();
            });
        }

@allan will need to take a look ad buttons.html5.js version 3.0.0 to see why the error is occurring.
https://live.datatables.net/wonupemu/8

I updated the test case to use 1.10.14 (very old, it is from 2016). The test case seems to work properly.. The column filters aren't reset when exporting. You can try updating the buttons version to what you are using.
https://live.datatables.net/tehuvito/1/edit

Just curious why are you using ajax.reload() in the Excel export?

Kevin

mahuss · March 4

"Your test case wasn't quite right.buttons.buttons.action was inside the exportOptions so it wasn't executing" : strange, but I was sure that this part works fine

It seems I've managed with the problem using this example:
https://live.datatables.net/xuvozaxu/1/edit

It's even better solution since I do not need to reload all cells in the table, but only one per mouse-click.

Why do i need this?:

My datatable is to contain the column of dropdowns with choices. Everything works ok with it, but sorting, searching etc. need to be rebuild for this purpose. I decided to use a hidden column which contains the text values (ajax helps to add them immediately) as a workaround.
So element (dropdown) change triggers database query through xhttp. This changes the value. Unfortunately datatables does not refresh simultaneously , so exports and filters do not "see" the new value till the site is reloaded.

Now it seems everything works good.

Once again thanks for help and debugging!

kthorngren · March 4

Great, glad its working. Yes, as your example shows you need to use Datatables APIs to update, not only the table, but Datatables data cache. Then export, sorting, searching will work properly without reloading from the server.

Kevin

samraj · April 19

@kthorngren
I'm getting the same error :
Uncaught (in promise) TypeError: cb is not a function
at buttons.html5.js:1443:5

Did you find any solution to this? I'm using datatable version 2 and buttons version 3.

allan · April 19

What version of Buttons specifically please? (So I know what the code is at that line number).

Allan

kthorngren · April 19

@allan I updated the above test case with Buttons 3.0.2. The problem still exists: [removed]

Kevin

allan · April 19

Probably not the link you meant to paste in

This is the test case and, yup, I see the cb error. Working on it.

Allan

allan · April 19

https://live.datatables.net/wonupemu/10/edit

In Buttons 3 the action method is given, and expects, 5 parameters. So if you are calling action directly, you need to add that extra parameter. Adding it to the example stops the error.

Allan

samraj · April 19

@kthorngren @allan thank you so much guys.

Overriding excel button action

Overriding excel button action

Answers

Howdy, Stranger!

Categories

DataTables

Overriding excel button action

Overriding excel button action

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables