How do I use ui themes for jquery datatables?

17,179

Solution 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

Solution 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>
Share:
17,179
akrabi
Author by

akrabi

Updated on June 11, 2022

Comments

  • akrabi
    akrabi over 1 year

    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.