SearchPanes raises an error if $.fn.dataTable.defaults contains language.url

gravsten

Link to test cases:
https://pilierpublic.com/tmp/datatables/
https://pilierpublic.com/tmp/datatables/OK

(respectively, containing 'language.url' -> raises an error, and without 'language.url' -> it works OK)

What I have found so far...

If 'language' is defined and contains 'url', the events 'init.dt' and 'draw.dt' are raised at page load...
but pressing on the "SearchPanes" button results in error:

Uncaught TypeError: Cannot read properties of undefined (reading 'scrollHeight')
    at _fnScrollDraw (datatables.js:16573:32)
    at _fnAdjustColumnSizing (datatables.js:13705:4)
    at _Api.<anonymous> (datatables.js:20138:4)
    at _Api.iterator (datatables.js:18258:15)
    at _Api.<anonymous> (datatables.js:20137:15)
    at Function.adjust (datatables.js:18378:17)
    at _Api.<anonymous> (datatables.js:20098:19)
    at _Api.iterator (datatables.js:18258:15)
    at _Api.<anonymous> (datatables.js:20077:9)
    at _Api.visible (datatables.js:18378:17)

By commenting out 'url' (or all of 'language'), the events 'init.dt' and 'draw.dt' are NOT raised at page load...
but pressing on the "SearchPanes" button works fine!

Test environment: DataTables 2.0.2 with Bootstrap 4 integration + JQuery 3.7.1, exactly like the examples on the DataTables website. Omitting Bootstrap .js and .css will results in the exact same error.

IMO, this is a bug inside the SearchPanes extension.

As I was investigating this issue, I also found out that SearchPane.prototype._getPaneConfig() was overwriting the DataTables settings:

            var langOpts = this.s.dt.settings()[0].oLanguage;
            langOpts.url = undefined;
            langOpts.sUrl = undefined;

The first of these lines should probably be changed to:

            var langOpts = Object.assign({}, this.s.dt.settings()[0].oLanguage);

gravsten

I have updated the test cases with improved Boostrap formatting, moved the "SearchPanes" button to left in order to have the dtsp-panes positioned correctly).

Please disregard my comment about the the 'init.dt' and 'draw.dt' (as they are raised indeed).

Remains the issue highlighted above, that is : an error is raised when opening the SearchPanes if the DT defaults contain a language URL.

colin

It works with a basic example, so it must be one of the extra options that you're using, or the extra code you have. Have you had any joy pinning it down further?

Colin

gravsten

Yes, I have narrowed down the issue to this:

If the 'language' option is defined at DataTable object creation, it works OK (as in your basic example).

But if the 'language' option is set in the default configuration, it fails.

See by changing your basic example thus:

Object.assign(DataTable.defaults, {
  language: { url: "https://cdn.datatables.net/plug-ins/1.10.20/i18n/German.json" }
});

var table = new DataTable('#example', {
    layout: {
        topStart: {
            buttons: ['searchPanes']
        },
    },
});

colin

Ah, perfect, thank you for that. Yep, that's easily reproducible here.

I've raised it internally (DD-2938 for my reference) and we'll report back here when there's an update.

Colin