Problem when using dataTables defaults together with button.add API

BjornHa

I don't know when this stopped working, but we had it running for a year in one page.

the settings in datatables.default

$.extend($.fn.dataTable.defaults, {
....
    searchBuilder: {
        grayscale: false
    },
....
} );

Buttons added that activated the extensions:

            searchAppTable.button().add(null, {
                extend: 'searchBuilder',
                grayscale: false,
                className: 'btn-secondary',
                config: {
                    depthLimit: 3,
                    columns: [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 27, 28, 30, 31, 32, 33, 34, 35, 36, 37, 38]
                }
            });

This now not working for searchbuilder with the latest versions of dataTables and relevant extensions.
However if the default section for searchBuilder is removed from defaults, the button.add API works again...

$.extend($.fn.dataTable.defaults, {
....
    /* searchBuilder: {
        grayscale: false
    }, */
....
} );

We were not depending on the defaults for searchBuilder so we just removed it, so this is really a FYI for anyone experience the same.

KR,
Björn Hasselberg

kthorngren

I built a test case for you to test it and you are right it fails with this error:

dataTables.searchBuilder.js:3797 Uncaught TypeError: Cannot read properties of undefined (reading 's')
    at _Api.action (dataTables.searchBuilder.js:3797:26)
    at run (dataTables.buttons.js:846:19)
    at action (dataTables.buttons.js:867:6)
    at HTMLButtonElement.<anonymous> (dataTables.buttons.js:882:7)
    at HTMLButtonElement.dispatch (jquery-3.7.1.min.js:2:40035)
    at v.handle (jquery-3.7.1.min.js:2:38006)

Test case:
https://live.datatables.net/dijodeva/1/edit

Kevin

BjornHa

Thanks Kevin

allan

You'll need to use:

$.extend(true, $.fn.dataTable.defaults, {

In this case, to do a deep extend. Otherwise you replace the default searchBuilder object with one that just has that single property.

Allan

BjornHa

That did not fix the testcase @allan ?

kthorngren

YEs the same error occurs, updated test case:
https://live.datatables.net/dijodeva/3/edit

Kevin

allan

Ah sorry. I'm on a mobile at the moment and the live site doesn't play nicely with it. I'll take a look tomorrow on a proper computer .

Allan

allan

https://live.datatables.net/dijodeva/4/edit

Couple of things going on:

1. The parameter name is greyscale rather than grayscale. Apologies - for parameters I normally follow American English in keeping with JS and CSS, but that one slipped by! I'll look at putting in an alias.
2. The defaults for SearchBuilder are on DataTable.SearchBuilder.defaults (or $.fn.dataTable.SearchBuilder.defaults if you prefer - it is the same object).

What was causing an issue with setting it on DataTable.defaults.searchBuilder is the initialisation code:

    let opts = options
        ? options
        : api.init().searchBuilder || DataTable.defaults.searchBuilder;

It will take either the options from the init object, or the default initialisation value (that's an important distinction - the there are really three layers here - the init options, the default init option and the default!). It doesn't attempt to merge them, and doing so might actually be a bit tricky since they can easy take multiple type values.

I'll look into making that easier, or at least documenting it and looking at the rest of the extensions, as it took me looking at the code to understand it, so it isn't quite right! For now, set SearchBuilder default values on its own defaults object.

Thanks for posting this!

Allan

BjornHa

Verified and implmented in our test environment, thanks