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

by cuspenser

HTML

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/v/zf/jszip-2.5.0/dt-1.13.4/b-2.3.6/b-colvis-2.3.6/b-html5-2.3.6/b-print-2.3.6/cr-1.6.2/date-1.4.1/fc-4.2.2/r-2.4.1/rg-1.3.1/sc-2.1.1/sb-1.4.2/sr-1.2.2/datatables.min.css">
    
    
	<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
	<script src="https://cdn.datatables.net/v/zf/jszip-2.5.0/dt-1.13.4/b-2.3.6/b-colvis-2.3.6/b-html5-2.3.6/b-print-2.3.6/cr-1.6.2/date-1.4.1/fc-4.2.2/r-2.4.1/rg-1.3.1/sc-2.1.1/sb-1.4.2/sr-1.2.2/datatables.min.js"></script>
   

    <meta charset=utf-8 />
    <title>DataTables</title>
  </head>
  <body>
    <div class="container">
    <div id="dt_viewbtns"></div>
      <table id="example" class="display nowrap" width="100%">
        <caption id="example_caption"></caption>
        <thead>
          <tr>
            <th>Category</th>
            <th>Setup</th>
            <th>Punchline</th>
          </tr>
        </thead>
      </table>
    </div>
  </body>
</html>

JavaScript

$(document).foundation();

$(document).ready(function () {
   table = $('#example').DataTable({
   			dom: 'BQ',
        ajax: {
        	url: 'https://official-joke-api.appspot.com/jokes/ten',
          dataSrc: ''
        },
        columns: [
            {data: 'type'},
    				{data: 'setup'},
    				{data: 'punchline'},
        ],
        "initComplete": function(settings, json){ 
					var api = this.api();
					var info = api.page.info();
					$("#example_caption").append("Random Jokes ("+info.recordsTotal+")" ); // display number of results
				 },
        buttons: [
						{
							extend: 'searchBuilder',
							className: 'secondary',
						},
						{
							text: 'Reset Filter',
							className: 'secondary',
							action: function ( e, dt, node, config ) {
								dt.searchBuilder.rebuild({});
								dt.columns(config.show).visible(true);
								$('#table9_caption').html('');
							}
						}
       ]
    });
    
    new $.fn.dataTable.Buttons( table, {
				buttons: [
					{
						text: '"What" Jokes',
						attr: { id: 'btnWhat' },
						action: function ( e, dt, node, config ) {
							dt.searchBuilder.rebuild({ "criteria": [ { "condition": "starts", "data": "Setup", "value": ["what"] } ], "logic": "AND" });
							var rowCount = dt.rows({search: 'applied'}).data().toArray().length;
							$('#btnWhat').text('"What Jokes" ('+rowCount+')');
						}
					},
          {
						text: '"Why" Jokes',
						attr: { id: 'btnWhy' },
						action: function ( e, dt, node, config ) {
							dt.searchBuilder.rebuild({ "criteria": [ { "condition": "starts", "data": "Setup", "value": ["why"] } ], "logic": "AND" });
							var rowCount = dt.rows({search: 'applied'}).data().toArray().length;
							$('#btnWhy').text('"Why Jokes" ('+rowCount+')');
						}
					}
				],
			} );
			
			table.buttons( 1, null ).container().appendTo('#dt_viewbtns');
			
			 
      $('#example').DataTable().searchBuilder.rebuild({ "criteria": [ { "condition": "starts", "data": "Setup",...