Menu
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.
628
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.
DataTables saves the state of a table (its paging position, ordering state etc). When the stateSave option is enabled, it can be restored when the user reloads a page, or comes back to the page after visiting a sub-page.
This repository contains a collection of plug-ins for the jQuery DataTables table enhancer. These plug-ins are feature enhancing for the DataTables library, adding extra options to core functionality such as additional sort algorithms, API methods and pagination controls.
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
69
Even these days (3 years later) this question is still actual. I did not use theme_roller as suggested.
In most cases problems are:
dom: "Bfltip").To use jQueryUI theme with DataTables (in current version 1.10.8) next order ony worked for me:
CSS
dataTables.jqueryui.csssmoothness/jquery-ui.cssJS
jquery.jsjquery-ui.jsjquery.dataTables.jsdataTables.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.cssJS
dataTables.buttons.jsbuttons.jqueryui.jsbuttons.print.jsAlthough 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
