6

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.

Jay Riggs
  • 53,046
  • 9
  • 139
  • 151
akrabi
  • 4,244
  • 2
  • 18
  • 19

2 Answers2

7

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

wirey00
  • 33,517
  • 7
  • 54
  • 65
  • I added `@import "/DataTables/media/css/jquery.dataTables_themeroller.css"` but it remains unstyled. Thanks anyway. – akrabi Jul 12 '12 at 16:07
  • Do you have the files in those locations? What browser are you using? Check the console for any errors – wirey00 Jul 12 '12 at 16:08
  • @akrabi I just updated my answer also. Try importing your style sheets like that – wirey00 Jul 12 '12 at 16:20
  • that did the trick! can't believe that was the problem. Thanks a lot. – akrabi Jul 12 '12 at 16:25
  • 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? – akrabi Jul 12 '12 at 16:28
  • 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 – wirey00 Jul 12 '12 at 16:29
  • Oh, now i see... But what functionality does each one of these add? `` `` `` – akrabi Jul 12 '12 at 16:33
  • 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 – wirey00 Jul 12 '12 at 16:48
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

  1. buttons.jqueryui.css

JS

  1. dataTables.buttons.js
  2. buttons.jqueryui.js
  3. 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>
Vladimir Vukanac
  • 944
  • 16
  • 29