table.searchBuilder.getDetails() throws "Cannot read properties of undefined getDetails"
table.searchBuilder.getDetails() throws "Cannot read properties of undefined getDetails"
washuit-iamm
Posts: 133Questions: 55Answers: 2
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.
This question has an accepted answers - jump to answer
Answers
Using
ajax
, whether using server side processing or not, is an asynchronous process. If you only need this once after initialization move that code intoinitComplete
. If you want to use it each time the server side process is called then usexhr
.Kevin
@kthorngren Same issue:
@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?
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 fordraw
?Allan
@allan Similar issue with draw event and
.rebuild().
Usecase: Allow user to share their search config with eachother. And save/bookmark as well.
IE:
Open to advice or alternative solutions.
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
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 withsearchBuilder.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
@kthorngren that is very helpful. Regarding that ready method, the docs say:
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.
I agree that sentence is a bit confusing but true; those events fire only once
The
ready()
docs state this: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
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