title: Cannot add custom element to jQuery DataTable header
body: <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>