Skip to content

jquery.dataTables.min.js is not loading correctly via Webjar? #1

New issue
New issue
Open
Open
jquery.dataTables.min.js is not loading correctly via Webjar?#1
@HachemZit

Description

@HachemZit
HachemZit
opened on Jun 26, 2018

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 : CLICK HERE TO VIEW

Console Files getting loaded : CLICK HERE

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions