Giter VIP home page Giter VIP logo

springjquerydatatables's People

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar

Forkers

summerlyu sushiljic stanharris iammatheusmoura dc43360 narakai junlapong mahedi-kaysar itriumph castillo8811 enhsuld nekrotl adi-tej chandanws ypaseka vip3r011 medmachhour jeroenherman kiransripada chandrusvc nengv1 belaggoun kprathap23 meltranfield2 muzammilfarook andervilo seneragit jorgeaugusto sanogotech villarealron cthirubackup2018

springjquerydatatables's Issues

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 : 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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.