Show count of results within button text for pre-defined searchBuilder on ajax-loaded data

cuspenser

Continuation from Show the count within the button caption for pre-defined searchbuilder

Can you offer any insights on where I would put the code for an ajax-based datatable?

I can make Sandy's code work with static data, but I'm running into issues with trying to get the value of a predefined searchBuilder result to appear in the button that's used to run the filter on ajax-loaded data.

I get the following error:

caught TypeError: Cannot read properties of undefined (reading 's')
    at n.rebuild (datatables.min.js:129:57259)
    at B.<anonymous> (datatables.min.js:129:66086)
    at Object.rebuild (datatables.min.js:31:53369)
    at HTMLDocument.<anonymous> (home.php:1766:43)
    at j (jquery.min.js:2:29999)
    at k (jquery.min.js:2:30313)

That error is related to the first line of the following, which I have following the initialization of my datatable (and includes ajax option):

$('#example').DataTable().searchBuilder.rebuild({ "criteria": [ { "condition": "null", "data": "Office", "value": [] } ], "logic": "AND" });
var rowCount = $('#example').DataTable().rows({search: 'applied'}).data().toArray().length;
$('#btnOffice').text('Blank Offices ('+rowCount+')')
$('#example').DataTable().searchBuilder.rebuild();

I assume the issue is that the above code is executed before the datatable has fully loaded, so I'm getting the "undefined" error because the data for searchbuilder hasn't been loaded into the table yet. Is that correct? If so, how do I get the button to show the number of results from that search on ajax data?

I've also tried putting the same code inside the initComplete and drawCallback options, but I get the same error.

Thanks for any help you can offer.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

cuspenser

Thanks, Colin,

Here is a link to a fiddle with the issue.

Clicking on the '"What" Jokes' and '"Why" Jokes' will update the button text with the count of the results from the searchBuilder. What I am having trouble with is getting those results to display after the DataTable has been initialized and the data loaded from ajax. At the end of the JS code, I have the code from Sandy's example I originally referenced, but when running that I get the error I noted above.

I assume that whatever code I need to run should go under initComplete , but I don't know what that code would look like.

Thank you for your help.

Tanner

colin

Apologies for the late reply. I think the issue is that the SearchBuilder is initialised later as a button, so not as part of the table definition. You may be able to move that initialisation code into the main init code, and just move the element outside.

Another possible solution would be to delay that code with setTimeout, something like this: https://jsfiddle.net/pnmL89c1/

Colin

cuspenser

Brilliant! Thank you, Colin. I would have never considered setTimeout. This works great and I can live with the slight delay.

Thanks, again!

Tanner