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.

Urchin

are you getting any console errors? – Lissy

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

Lissy

I added @import "/DataTables/media/css/jquery.dataTables_themeroller.css" but it remains unstyled. Thanks anyway. – Urchin

Do you have the files in those locations? What browser are you using? Check the console for any errors – Lissy

@Urchin I just updated my answer also. Try importing your style sheets like that – Lissy

that did the trick! can't believe that was the problem. Thanks a lot. – Urchin

I'm not quite sure I completely understand the purpose of each of the included .js files. What functionality does each one of them add? – Urchin

they are the css files actually. In your import statement you were just missing the `url' part i think. I'll update my answer for you – Lissy

Oh, now i see... But what functionality does each one of these add? <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> – Urchin

I'm guessing one adds the jQuery javascript file you need to use jQuery. One imports the jQueryUI(dependant on jQuery) js file so you are able to use the UI plugins. The other one imports the dataTables(dependant on jQuery) so you can use the dataTables plugins – Lissy

Answer 2

Even these days (3 years later) this question is still actual. I did not use theme_roller as suggested.

In most cases problems are:

• wrong ordering styles or javascript files,
• missed to load any of required files,
• conflict or overwriting theme with extensions' style,
• extension not initialized (eg. dom: "Bfltip").

To use jQueryUI theme with DataTables (in current version 1.10.8) next order ony worked for me:

CSS

1. dataTables.jqueryui.css
2. smoothness/jquery-ui.css

JS

1. jquery.js
2. jquery-ui.js
3. jquery.dataTables.js
4. dataTables.jqueryui.js

$(document).ready(function() {
  var table = $('#dataContainer');
  table.DataTable({});
});

@import url("//cdn.datatables.net/1.10.8/css/dataTables.jqueryui.css");
@import url("//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css");

<html>

<head>
  <!-- link master.css -->
</head>

<body>
  <table id="dataContainer" class="display" cellspacing="0" width="100%">
    <thead>
      <tr><th>Position</th><th>Age</th><th>Start date</th></tr>
    </thead>

    <tr><td>batman</td><td>17</td><td>2015-12-26</td></tr>
    <tr><td>marko kraljevic</td><td>18</td><td>2015-12-26</td></tr>
    <tr><td>superman</td><td>1</td><td>2015-06-29</td></tr>
  </table>
  
  
  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.js"></script>
  <script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script type="text/javascript" src="//cdn.datatables.net/1.10.8/js/jquery.dataTables.js"></script>
  <script type="text/javascript" src="//cdn.datatables.net/1.10.8/js/dataTables.jqueryui.js"></script>
  
</body>

</html>

Extensions

Manual (Download Builder) suggested to add extensions (eg. Buttons/Print,Select) styles at the end.

CSS

3. buttons.jqueryui.css

JS

5. dataTables.buttons.js
6. buttons.jqueryui.js
7. buttons.print.js

Although button works (don't forget to initialize it), but this breaks styling. Missing part to play with is (dataTables ver < v1.11):

js

dom : '<"H"B<"dt-make-valign-center"lfr>>t<"F"ip>',
jQueryUI: true,

css

.dt-make-valign-center {
    margin: 5px;
}

Working code with Button:

$(document).ready(function() {
  var table = $('#dataContainer');
  table.DataTable({
    dom: '<"H"B<lfr>>t<"F"ip>',
    jQueryUI: true,
    buttons: [
      'print'
    ]
  });
});

@import url("//cdn.datatables.net/1.10.8/css/dataTables.jqueryui.css");
@import url("//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css");
@import url("//cdn.datatables.net/buttons/1.0.0/css/buttons.jqueryui.css");

<html>

<head>
  <!-- link master.css -->
</head>

<body>
  <table id="dataContainer" class="display" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th>Position</th>
        <th>Age</th>
        <th>Start date</th>
      </tr>
    </thead>

    <tr>
      <td>batman</td>
      <td>17</td>
      <td>2015-12-26</td>
    </tr>
    <tr>
      <td>marko kraljevic</td>
      <td>18</td>
      <td>2015-12-26</td>
    </tr>
    <tr>
      <td>superman</td>
      <td>1</td>
      <td>2015-06-29</td>
    </tr>
  </table>


  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.js"></script>
  <script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script type="text/javascript" src="//cdn.datatables.net/1.10.8/js/jquery.dataTables.js"></script>
  <script type="text/javascript" src="//cdn.datatables.net/1.10.8/js/dataTables.jqueryui.js"></script>
  <script type="text/javascript" src="//cdn.datatables.net/buttons/1.0.0/js/dataTables.buttons.js"></script>
  <script type="text/javascript" src="//cdn.datatables.net/buttons/1.0.0/js/buttons.jqueryui.js"></script>
  <script type="text/javascript" src="//cdn.datatables.net/buttons/1.0.0/js/buttons.print.js"></script>

</body>

</html>

Reconciliatory