All geek questions in one place

How to use ui themes for jQuery datatables?

I am trying to add a "smoothness" theme to my jquery datatable without success. My datatable is simply not framed.

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 in 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.

+6
source share
2 answers

You need to import the jquery.dataTables_themeroller.css file so that it works with themes. Or, if you are not using themes, just use jquery.dataTables.css

You should also try importing your CSS as

 <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 import instructions - you are 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, at the end, your css was not imported, so your table did not apply formatting

+7
source

Even these days (3 years later), this issue is still relevant. I did not use theme_roller as suggested.

In most cases, the problems are:

  • incorrect javascript ordering styles or files,
  • skipped to download any of the necessary files,
  • Conflict or rewrite the theme using the extension style
  • the extension is not initialized (for example, dom: "Bfltip" ).

To use the jQueryUI theme with DataTables (in the current version 1.10.8), the following ony order 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

In manual mode ( Download Builder ) it is proposed to add extensions (for example, buttons / print, selection) at the end.

CSS

  1. buttons.jqueryui.css

Js

  1. dataTables.buttons.js
  2. buttons.jqueryui.js
  3. buttons.print.js

Although the button works (do not forget to initialize it), but this style breaks . The missing part to play (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>
+2
source

Source: https://habr.com/ru/post/920338/

More articles:


All Articles