How do I use ui themes for jquery datatables?

StackOverflow https://stackoverflow.com/questions/11454907

题

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.

有帮助吗？

解决方案

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

其他提示

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>

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top