SpringJQueryDataTables
SpringJQueryDataTables copied to clipboard
Published
20 hours ago •
gustavoponce7
gustavoponce7
jquery.dataTables.min.js is not loading correctly via Webjar?
Hi
I'm a bit new to coding. My question is the same as the title. I'm working on springboot+thymeleaf web project in my pom.xml I have this.
<dependency>
<groupId>org.webjars.bower</groupId>
<artifactId>datatables.net-bs</artifactId>
<version>1.10.11</version>
</dependency>
<dependency>
<groupId>org.webjars.bower</groupId>
<artifactId>datatables.net</artifactId>
<version>1.10.11</version>
</dependency>
<dependency>
<groupId>org.webjars.bower</groupId>
<artifactId>datatables.net-responsive</artifactId>
<version>2.0.2</version>
</dependency>
<dependency>
<groupId>org.webjars.bower</groupId>
<artifactId>datatables.net-responsive-bs</artifactId>
<version>2.0.2</version>
</dependency>
<dependency>
<groupId>org.webjars.bower</groupId>
<artifactId>datatables.net-fixedheader</artifactId>
<version>3.1.1</version>
</dependency>
<dependency>
<groupId>org.webjars.bower</groupId>
<artifactId>datatables.net-fixedheader-bs</artifactId>
<version>3.1.1</version>
</dependency>
<dependency>
<groupId>org.webjars.bower</groupId>
<artifactId>datatables.net-buttons-bs</artifactId>
<version>1.1.2</version>
</dependency>
<dependency>
<groupId>org.webjars.bower</groupId>
<artifactId>datatables.net-buttons</artifactId>
<version>1.1.2</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jszip</artifactId>
<version>2.6.1</version>
</dependency>
<dependency>
<groupId>org.webjars.bower</groupId>
<artifactId>datatables.net-keytable</artifactId>
<version>2.1.2</version>
</dependency>
<dependency>
<groupId>org.webjars.bower</groupId>
<artifactId>datatables.net</artifactId>
<version>1.10.11</version>
</dependency>
<dependency>
<groupId>org.webjars.bower</groupId>
<artifactId>datatables.net-bs</artifactId>
<version>1.10.11</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>2.2.3</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator</artifactId>
<version>0.30</version>
</dependency>
my controller code
@Controller
public class PageController {
@GetMapping("/ss")
public String splainPage() {
return "ss";
}
}
later im gonna add list All users
and in my layout.html I loaded all my css and js paths like this :
<!-- Bootstrap -->
<link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="/webjars/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- NProgress -->
<link href="/webjars/nprogress/nprogress.css" rel="stylesheet">
<!-- Datatables -->
<link href="/webjars/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="/webjars/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" rel="stylesheet">
<link href="/webjars/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css" rel="stylesheet">
<link href="/webjars/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="/css/custom.min.css" rel="stylesheet">
</head>
<!-- jQuery -->
<script src="/webjars/jquery/2.2.3/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
<!-- Datatables -->
<script src="/webjars/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/webjars/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="/webjars/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="/webjars/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
<script src="/webjars/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="/webjars/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="/webjars/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="/webjars/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js"></script>
<script src="/webjars/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
<script src="/webjars/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="/webjars/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script>
<script src="/webjars/datatables.net-scroller/js/dataTables.scroller.min.js"></script>
<script src="/webjars/jszip/dist/jszip.min.js"></script>
Everything is working fine except DataTables features are not even showing up.
Current Result View : 
Console Files getting loaded : 
Desired Result View : https://colorlib.com/polygon/gentelella/tables_dynamic.html and I imported the right files according to https://datatables.net/examples/basic_init/zero_configuration.html here is the code of layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title data-layout-title-pattern="$LAYOUT_TITLE | $CONTENT_TITLE">Smart Designer !</title>
<!-- Bootstrap -->
<link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="/webjars/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- NProgress -->
<link href="/webjars/nprogress/nprogress.css" rel="stylesheet">
<!-- Datatables -->
<link href="/webjars/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="/webjars/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" rel="stylesheet">
<link href="/webjars/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css" rel="stylesheet">
<link href="/webjars/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="/css/custom.min.css" rel="stylesheet">
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
<div class="col-md-3 left_col menu_fixed">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<a href="index.html" class="site_title"><i class="fa fa-paw"></i> <span>Smart Designer !</span></a>
</div>
<div class="clearfix"></div>
<!-- menu profile quick info -->
<div data-th-replace="fragments/fragment-menu-profile-quick-info :: menu-profile-quick-info"></div>
<!-- /menu profile quick info -->
<br/>
<!-- sidebar menu -->
<div data-th-replace="fragments/fragment-sidebar-menu :: sidebar-menu"></div>
<!-- /sidebar menu -->
<!-- /menu footer buttons -->
<!--<div data-th-replace="fragments/fragment-menu-footer-buttons :: menu-footer-buttons"></div>-->
<!-- /menu footer buttons -->
</div>
</div>
<!-- top navigation -->
<div data-th-replace="fragments/fragment-top-navigation :: top-navigation"></div>
<!-- /top navigation -->
<!-- page content -->
<div data-layout-fragment="content"></div>
<!-- /page content -->
<!-- footer content -->
<div data-th-replace="fragments/fragment-footer-content :: footer-content"></div>
<!-- /footer content -->
</div>
</div>
<!-- jQuery -->
<script src="/webjars/jquery/2.2.3/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="/webjars/fastclick/fastclick.js"></script>
<!-- NProgress -->
<script src="/webjars/nprogress/nprogress.js"></script>
<!-- jquery.inputmask -->
<script src="/webjars/jquery.inputmask/min/jquery.inputmask.bundle.min.js"></script>
<script src="/webjars/inputmask/inputmask/bindings/inputmask.binding.js"></script>
<!-- Datatables -->
<script src="/webjars/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/webjars/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="/webjars/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="/webjars/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
<script src="/webjars/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="/webjars/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="/webjars/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="/webjars/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js"></script>
<script src="/webjars/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
<script src="/webjars/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="/webjars/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script>
<script src="/webjars/datatables.net-scroller/js/dataTables.scroller.min.js"></script>
<script src="/webjars/jszip/dist/jszip.min.js"></script>
<!-- dataTables.responsive -->
<script src="/webjars/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="/webjars/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script>
<!-- Custom Theme Scripts -->
<script src="/js/custom.min.js"
here is the code of my html page :
<!DOCTYPE html>
<html lang="en" data-layout-decorate="~{fragments/layout}">
<head>
<title>Plain Page</title>
</head>
<body>
<div class="right_col" role="main" data-layout-fragment="content">
<div class="">
<div class="page-title">
<div class="title_left">
<h3>Plain Page</h3>
</div>
<div class="title_right">
<div
class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<div class="input-group">
<input type="text" class="form-control"
placeholder="Search for..."> <span
class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Plain Page</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i
class="fa fa-chevron-up"></i></a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-expanded="false"><i
class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a></li>
<li><a href="#">Settings 2</a></li>
</ul></li>
<li><a class="close-link"><i class="fa fa-close"></i></a></li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>
Button Example <small>Users</small>
</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i
class="fa fa-chevron-up"></i></a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-expanded="false"><i
class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a></li>
<li><a href="#">Settings 2</a></li>
</ul></li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<p class="text-muted font-13 m-b-30">The Buttons extension
for DataTables provides a common set of options, API methods
and styling to display buttons on a page that will interact
with a DataTable. The core library provides the based
framework upon which plug-ins can built.</p>
<table id="datatable-buttons"
class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#datatable-buttons')
.addClass('table table-striped table-bordered');
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#datatable-buttons').DataTable();
} );
</script></body></html>
i already imported all css /scripts mentioned in the bottom that same html page apparently css /js files can call other ressources that are not mentioned in the bottom of of the needed html page
