table.searchBuilder.getDetails() throws "Cannot read properties of undefined getDetails"

washuit-iamm

datatables.js:51919  Uncaught TypeError: Cannot read properties of undefined (reading 'getDetails')
    at SearchBuilder.getDetails (datatables.js:51919:36)
    at _Api.<anonymous> (datatables.js:52434:32)
    at Object.getDetails (datatables.js:23873:17)
    at index.html:411:45

I apologize in advance for no test case, this requires serverSide data I think.

If I call this code in a setTimeout, it works!

setTimeout(function () {
    console.log(table.searchBuilder);
    var d = table.searchBuilder.getDetails();
    console.log(d);
}, 3000);

There is some issue where getDetails chokes if the server side data has not loaded yet.

kthorngren

Using ajax, whether using server side processing or not, is an asynchronous process. If you only need this once after initialization move that code into initComplete. If you want to use it each time the server side process is called then use xhr.

Kevin

washuit-iamm

@kthorngren Same issue:

washuit-iamm

@kthorngren And with xhr event, same issue:

There seems to be no way to access the queryBuilder API in events when using serverSide.

What am I missing?

allan

I rather suspect that SearchBuilder hasn't been created on the DataTable by the time the xhr event fires the first time, but I haven't had a chance to try it out yet. That would explain why it works if you add a time delay though.

What are you trying to do with the details in the xhr event? Can you wait for draw?

Allan

washuit-iamm

@allan Similar issue with draw event and .rebuild().

            table.on('draw', function () {

                console.log("draw - TODO Share SearchBuilder Feature");
                // console.log(table.searchBuilder.getDetails());

                const urlParams = new URLSearchParams(window.location.search);
                const searchBuilderParam = urlParams.get('searchBuilder');
                if (searchBuilderParam) {
                    table.searchBuilder.rebuild(JSON.parse(searchBuilderParam));
                }
            })

Usecase: Allow user to share their search config with eachother. And save/bookmark as well.

IE:

{
    text: 'Share',
    action: function (e, dt, node, config) {
        const search = dt.searchBuilder.getDetails();
        const value = JSON.stringify(search);
        const queryParams = new URLSearchParams();
        queryParams.set("searchBuilder", value);
        const shareUrl = `${window.location.origin}/index.html?${queryParams}`;
// TODO - Display link to user
        console.log(shareUrl);
    }
},

Open to advice or alternative solutions.

kthorngren

Using the new ready() API seems the way to go. I placed your code into this test case:
https://live.datatables.net/yaroyala/2/edit

I tried this "share" link and it worked:
https://live.datatables.net/yaroyala/2?searchBuilder=%7B%22criteria%22%3A%5B%7B%22condition%22%3A%22starts%22%2C%22data%22%3A%22Name%22%2C%22origData%22%3A%22first_name%22%2C%22type%22%3A%22string%22%2C%22value%22%3A%5B%22air%22%5D%7D%5D%2C%22logic%22%3A%22AND%22%7D

Kevin

kthorngren

You may also be interested in the Deep link plugin. Although this example is using searchPanes.preSelect with deep linking it might give you an idea of how to do the same with searchBuilder.preDefined:
https://live.datatables.net/rejeqese/1?searchPanes.preSelect=[{%22rows%22:[%22Edinburgh%22,%22London%22],%22column%22:2}]

The example is from this thread if you want some background.

Kevin

washuit-iamm

@kthorngren that is very helpful. Regarding that ready method, the docs say:

but they only fire once on a table and (without this method) there is no way to know if the table is ready or not.

That seems to suggest ready couple be called more than once, obviously that would be a big issue if the query string is being read and searchBuilder invoked multiple times after the page loads.

In my testing, I was able to search, sort, filter and mess with the query builder without seeing ready be called > 1 time but the docs worry me in that regard.

kthorngren

I agree that sentence is a bit confusing but true; those events fire only once

The ready() docs state this:

DataTables is in it's "ready" state - i.e. it has initialised, its control elements are on the page and the first data has been loaded and displayed.

My understanding is the "ready" state happens only once. However you could call ready() multiple times and the function defined will execute each time called but only after the Datatable has reached the "ready" state. As long as you call it only once the function will execute only once. Again that is my understanding. I haven't messed with it much though.

@allan can confirm and maybe adjust that verbiage a bit.

Kevin

allan

Yes, Kevin's understanding is spot on. You can call ready() as many times as you want - it will execute whatever is given to it when the DataTable is ready, or immediately if the DataTable is already in a "ready" state.

Allan