我对编码有点陌生。我的问题和标题一样。我正在my pom.xml
中从事springboot + thymeleaf网络项目的工作。
<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>
在我的layout.html
中,我像这样加载了所有的CSS和JS路径:
<!-- 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>
一切正常,除非DataTables
功能没有显示。
所需结果视图:https://colorlib.com/polygon/gentelella/tables_dynamic.html 然后根据https://datatables.net/examples/basic_init/zero_configuration.html导入了正确的文件 这是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"></script>
<!-- <script src="/js/inputmask.binding.js"></script>-->
</body>
</html>
和我的custom.js(请看底部,我添加了与https://datatables.net/examples/basic_init/zero_configuration.html上所示的功能相同的功能)
/**
* Resize function without multiple trigger
*
* Usage:
* $(window).smartresize(function(){
* // code here
* });
*/
(function($,sr){
// debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
}
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
};
// smartresize
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize');
/**
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
var CURRENT_URL = window.location.href.split('#')[0].split('?')[0],
$BODY = $('body'),
$MENU_TOGGLE = $('#menu_toggle'),
$SIDEBAR_MENU = $('#sidebar-menu'),
$SIDEBAR_FOOTER = $('.sidebar-footer'),
$LEFT_COL = $('.left_col'),
$RIGHT_COL = $('.right_col'),
$NAV_MENU = $('.nav_menu'),
$FOOTER = $('footer');
// Sidebar
$(document).ready(function() {
// TODO: This is some kind of easy fix, maybe we can improve this
var setContentHeight = function () {
// reset height
$RIGHT_COL.css('min-height', $(window).height());
var bodyHeight = $BODY.outerHeight(),
footerHeight = $BODY.hasClass('footer_fixed') ? -10 : $FOOTER.height(),
leftColHeight = $LEFT_COL.eq(1).height() + $SIDEBAR_FOOTER.height(),
contentHeight = bodyHeight < leftColHeight ? leftColHeight : bodyHeight;
// normalize content
contentHeight -= $NAV_MENU.height() + footerHeight;
$RIGHT_COL.css('min-height', contentHeight);
};
$SIDEBAR_MENU.find('a').on('click', function(ev) {
var $li = $(this).parent();
if ($li.is('.active')) {
$li.removeClass('active active-sm');
$('ul:first', $li).slideUp(function() {
setContentHeight();
});
} else {
// prevent closing menu if we are on child menu
if (!$li.parent().is('.child_menu')) {
$SIDEBAR_MENU.find('li').removeClass('active active-sm');
$SIDEBAR_MENU.find('li ul').slideUp();
}
$li.addClass('active');
$('ul:first', $li).slideDown(function() {
setContentHeight();
});
}
});
// toggle small or large menu
$MENU_TOGGLE.on('click', function() {
if ($BODY.hasClass('nav-md')) {
$SIDEBAR_MENU.find('li.active ul').hide();
$SIDEBAR_MENU.find('li.active').addClass('active-sm').removeClass('active');
} else {
$SIDEBAR_MENU.find('li.active-sm ul').show();
$SIDEBAR_MENU.find('li.active-sm').addClass('active').removeClass('active-sm');
}
$BODY.toggleClass('nav-md nav-sm');
setContentHeight();
});
// check active menu
$SIDEBAR_MENU.find('a[href="' + CURRENT_URL + '"]').parent('li').addClass('current-page');
$SIDEBAR_MENU.find('a').filter(function () {
return this.href == CURRENT_URL;
}).parent('li').addClass('current-page').parents('ul').slideDown(function() {
setContentHeight();
}).parent().addClass('active');
// recompute content when resizing
$(window).smartresize(function(){
setContentHeight();
});
setContentHeight();
// fixed sidebar
if ($.fn.mCustomScrollbar) {
$('.menu_fixed').mCustomScrollbar({
autoHideScrollbar: true,
theme: 'minimal',
mouseWheel:{ preventDefault: true }
});
}
});
// /Sidebar
// Panel toolbox
$(document).ready(function() {
$('.collapse-link').on('click', function() {
var $BOX_PANEL = $(this).closest('.x_panel'),
$ICON = $(this).find('i'),
$BOX_CONTENT = $BOX_PANEL.find('.x_content');
// fix for some div with hardcoded fix class
if ($BOX_PANEL.attr('style')) {
$BOX_CONTENT.slideToggle(200, function(){
$BOX_PANEL.removeAttr('style');
});
} else {
$BOX_CONTENT.slideToggle(200);
$BOX_PANEL.css('height', 'auto');
}
$ICON.toggleClass('fa-chevron-up fa-chevron-down');
});
$('.close-link').click(function () {
var $BOX_PANEL = $(this).closest('.x_panel');
$BOX_PANEL.remove();
});
});
// /Panel toolbox
// Tooltip
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip({
container: 'body'
});
});
// /Tooltip
// Progressbar
if ($(".progress .progress-bar")[0]) {
$('.progress .progress-bar').progressbar();
}
// /Progressbar
// Switchery
$(document).ready(function() {
if ($(".js-switch")[0]) {
var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
elems.forEach(function (html) {
var switchery = new Switchery(html, {
color: '#26B99A'
});
});
}
});
// /Switchery
// iCheck
$(document).ready(function() {
if ($("input.flat")[0]) {
$(document).ready(function () {
$('input.flat').iCheck({
checkboxClass: 'icheckbox_flat-green',
radioClass: 'iradio_flat-green'
});
});
}
});
// /iCheck
// Table
$('table input').on('ifChecked', function () {
checkState = '';
$(this).parent().parent().parent().addClass('selected');
countChecked();
});
$('table input').on('ifUnchecked', function () {
checkState = '';
$(this).parent().parent().parent().removeClass('selected');
countChecked();
});
var checkState = '';
$('.bulk_action input').on('ifChecked', function () {
checkState = '';
$(this).parent().parent().parent().addClass('selected');
countChecked();
});
$('.bulk_action input').on('ifUnchecked', function () {
checkState = '';
$(this).parent().parent().parent().removeClass('selected');
countChecked();
});
$('.bulk_action input#check-all').on('ifChecked', function () {
checkState = 'all';
countChecked();
});
$('.bulk_action input#check-all').on('ifUnchecked', function () {
checkState = 'none';
countChecked();
});
function countChecked() {
if (checkState === 'all') {
$(".bulk_action input[name='table_records']").iCheck('check');
}
if (checkState === 'none') {
$(".bulk_action input[name='table_records']").iCheck('uncheck');
}
var checkCount = $(".bulk_action input[name='table_records']:checked").length;
if (checkCount) {
$('.column-title').hide();
$('.bulk-actions').show();
$('.action-cnt').html(checkCount + ' Records Selected');
} else {
$('.column-title').show();
$('.bulk-actions').hide();
}
}
// Accordion
$(document).ready(function() {
$(".expand").on("click", function () {
$(this).next().slideToggle(200);
$expand = $(this).find(">:first-child");
if ($expand.text() == "+") {
$expand.text("-");
} else {
$expand.text("+");
}
});
});
// NProgress
if (typeof NProgress != 'undefined') {
$(document).ready(function () {
NProgress.start();
});
$(window).load(function () {
NProgress.done();
});
}
//mine Custom fonctions
function check(input) {
if(input.validity.typeMismatch){
input.setCustomValidity(input.value + "' is not a valid name. must not contain any of the any of the following characters 0x0000 0x0003 colon(:) backslash \\ asterisk (*) question mark (?) forward slash (/) opening square bracket ([) closing square bracket (])");
}
else {
input.setCustomValidity("");
}
}
$(document).ready(function() {
$('#datatable-buttons').DataTable();
} );
这是我的html页面的代码:
<!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>
</body>
</html>
我以前在这里遇到过类似的问题jquery.inputmask.bundle.min.js is not loading correctly via Webjar?,我怎么知道当前正在使用的资源,所以我可以导入它们 我已经导入了底部提到的所有css / scripts,同样的html页面显然可以将css / js文件调用需要的html页面底部未提及的其他资源