How do I use ui themes for jquery datatables?
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
dataTables.jqueryui.css
smoothness/jquery-ui.css
JS
jquery.js
jquery-ui.js
jquery.dataTables.js
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
buttons.jqueryui.css
JS
dataTables.buttons.js
buttons.jqueryui.js
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>
akrabi
Updated on June 11, 2022Comments
-
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.