How do I use ui themes for jquery datatables?

Question

I've been trying to add the "smoothness" theme to my jquery datatable with no success. My datatable just doesn't get styled.

Here is my header code:

<style type="text/css" title="currentStyle">
    @import "/DataTables/media/css/smoothness/jquery-ui-1.8.21.custom.css"
</style>
<script type="text/javascript" language="javascript" src="DataTables/media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="DataTables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="DataTables/media/js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $('#join').dataTable( {
                "bJQueryUI": true,
                "sPaginationType": "full_numbers"
            } );
    } );    
</script>

And here is the form at the body:

<table id="join" cellpadding="0" cellspacing="0" border="0" class="display" width="80%">
<thead>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Row 1 Data 1</td>
        <td>Row 1 Data 2</td>
    </tr>
    <tr>
        <td>Row 2 Data 1</td>
        <td>Row 2 Data 2</td>
    </tr>
</tbody>

What exactly am I doing wrong here??

Thanks for any help.

Answer 1

You need to import jquery.dataTables_themeroller.css file so it will work with the themes. Or if you aren't using themes then just use the jquery.dataTables.css

You should also try importing your css like this

<link rel="stylesheet" href="DataTables/media/css/smoothness/jquery-ui-1.8.21.custom.css"/>
<link rel="stylesheet" href="DataTables/media/css/jquery.dataTables_themeroller.css"/>

Or if you want to keep the import statements - You were missing the url part

<style type="text/css" title="currentStyle">
   @import url("DataTables/media/css/smoothness/jquery-ui-1.8.21.custom.css");
   @import url("DataTables/media/css/jquery.dataTables_themeroller.css");
</style>

So in the end your css was not getting imported therefore your table had no formatting applied