Cannot add custom element to jQuery DataTable header
<p>I tried to add custom toolbar element (i.e. Checkbox) to the DataTable as indicated on <a href="https://xcmsonline.scripps.edu/lib/DataTables-1.10.12/examples/advanced_init/dom_toolbar.html" rel="nofollow noreferrer">Custom toolbar elements</a> shown below, I cannot display the custom element on the header (there is no error on console). I also changed my javascript and css files with the ones on the example, but it did not make any sense. How can I add a Checkbox on DataTable header? </p>

<pre><code>$(document).ready(function() {
    $('#example').DataTable( {
        "dom": '&lt;"toolbar"&gt;frtip'
    } );

    $("div.toolbar").html('&lt;b&gt;Custom tool bar! Text/images etc.&lt;/b&gt;');
} );
</code></pre>

<p><br/></p>

<p><strong>Here is what I want to do on the image below:</strong></p>

<p><a href="https://i.stack.imgur.com/QeHn5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QeHn5.png" alt="enter image description here"></a></p>