title: How do I use ui themes for jquery datatables?
body: <p>I've been trying to add the "smoothness" theme to my jquery datatable with no success.
  My datatable just doesn't get styled.</p>
  
  <p>Here is my header code:</p>
  
  <pre><code>&lt;style type="text/css" title="currentStyle"&gt;
      @import "/DataTables/media/css/smoothness/jquery-ui-1.8.21.custom.css"
  &lt;/style&gt;
  &lt;script type="text/javascript" language="javascript" src="DataTables/media/js/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" language="javascript" src="DataTables/media/js/jquery.dataTables.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" language="javascript" src="DataTables/media/js/jquery-ui-1.8.21.custom.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" charset="utf-8"&gt;
      $(document).ready(function() {
          $('#join').dataTable( {
                  "bJQueryUI": true,
                  "sPaginationType": "full_numbers"
              } );
      } );    
  &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p>And here is the form at the body:</p>
  
  <pre><code>&lt;table id="join" cellpadding="0" cellspacing="0" border="0" class="display" width="80%"&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;Column 1&lt;/th&gt;
          &lt;th&gt;Column 2&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;Row 1 Data 1&lt;/td&gt;
          &lt;td&gt;Row 1 Data 2&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Row 2 Data 1&lt;/td&gt;
          &lt;td&gt;Row 2 Data 2&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p></p>
  
  <p>What exactly am I doing wrong here??</p>
  
  <p>Thanks for any help.</p>