search

darrachequesne / spring-data-jpa-datatables

Spring Data JPA extension to work with the great jQuery plugin DataTables (https://datatables.net/)
Apache License 2.0
441 stars 174 forks source link

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

Closed HachemZit closed 4 years ago

HachemZit commented 6 years ago

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

darrachequesne commented 5 years ago

At first sight, I see nothing wrong with your configuration. Did you find a solution?

darrachequesne commented 4 years ago

Closed due to inactivity, please reopen if needed.