Jquery未使用laravel 5.7加载
我正在使用Laravel Framework 5.7.19,希望在我的刀片视图中重新创建以下示例: 在Jquery未使用laravel 5.7加载,jquery,laravel,datatables,laravel-blade,Jquery,Laravel,Datatables,Laravel Blade,我正在使用Laravel Framework 5.7.19,希望在我的刀片视图中重新创建以下示例: 在layouts.app中,我定义了我的布局: <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content=
layouts.app
中,我定义了我的布局:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- ag-grid
<script src="https://unpkg.com/ag-grid-enterprise/dist/ag-grid-enterprise.min.noStyle.js"></script>
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css">
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-balham.css">
-->
<!-- jquery -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div id="app">
@include('layouts.nav.mainNav')
<main class="py-4">
@yield('content')
</main>
</div>
</body>
<script>
$(document).ready(function () {
/* Custom filtering function which will search data in column four between two values */
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var min = parseInt($('#min').val(), 10);
var max = parseInt($('#max').val(), 10);
var age = parseFloat(data[3]) || 0; // use data for the age column
if ((isNaN(min) && isNaN(max)) ||
(isNaN(min) && age <= max) ||
(min <= age && isNaN(max)) ||
(min <= age && age <= max)) {
return true;
}
return false;
}
);
$(document).ready(function () {
var table = $('#example').DataTable();
// Event listener to the two range filtering inputs to redraw on input
$('#min, #max').keyup(function () {
table.draw();
});
});
});
</script>
</html>
如您所见,我的datatable未正确加载:
此外,我的chrome开发者控制台中出现以下错误:
任何关于我做错了什么的建议?您的错误与加载JQuery无关,您的datatable自定义函数应该位于ready()函数的外侧
<script>
// out side of ready function
/* Custom filtering function which will search data */
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var min = parseInt($('#min').val(), 10);
var max = parseInt($('#max').val(), 10);
var age = parseFloat(data[3]) || 0; // use data for the age column
if ((isNaN(min) && isNaN(max)) ||
(isNaN(min) && age <= max) ||
(min <= age && isNaN(max)) ||
(min <= age && age <= max)) {
return true;
}
return false;
}
);
// out side of ready function end
$(document).ready(function () {
var table = $('#example').DataTable();
// Event listener to the two range filtering inputs to redraw on input
$('#min, #max').keyup(function () {
table.draw();
});
});
</script>
//准备就绪功能的外侧
/*自定义筛选功能,用于搜索数据*/
$.fn.dataTable.ext.search.push(
功能(设置、数据、数据索引){
var min=parseInt($('#min').val(),10);
var max=parseInt($('#max').val(),10);
var age=parseFloat(数据[3])| | 0;//将数据用于age列
如果((isNaN(最小值)和&isNaN(最大值))||
(isNaN(min)&&age您的错误与加载JQuery无关,您的datatable自定义函数应该位于ready()函数的外侧
<script>
// out side of ready function
/* Custom filtering function which will search data */
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var min = parseInt($('#min').val(), 10);
var max = parseInt($('#max').val(), 10);
var age = parseFloat(data[3]) || 0; // use data for the age column
if ((isNaN(min) && isNaN(max)) ||
(isNaN(min) && age <= max) ||
(min <= age && isNaN(max)) ||
(min <= age && age <= max)) {
return true;
}
return false;
}
);
// out side of ready function end
$(document).ready(function () {
var table = $('#example').DataTable();
// Event listener to the two range filtering inputs to redraw on input
$('#min, #max').keyup(function () {
table.draw();
});
});
</script>
//准备就绪功能的外侧
/*自定义筛选功能,用于搜索数据*/
$.fn.dataTable.ext.search.push(
功能(设置、数据、数据索引){
var min=parseInt($('#min').val(),10);
var max=parseInt($('#max').val(),10);
var age=parseFloat(数据[3])| | 0;//将数据用于age列
如果((isNaN(最小值)和&isNaN(最大值))||
(isNaN(min)和&age这对我来说很有效。jquery加载很好,但不起作用
我发现Laravel在您设置导航栏/登录系统时调用jquery。在标题中,您将找到:
<script src="{{ asset('js/app.js') }}" defer ><script>
我刚刚删除了'defer',jquery开始了
<script src="{{ asset('js/app.js') }}" ></script>
这对我很有效。jquery加载很好,但不起作用
我发现Laravel在您设置导航栏/登录系统时调用jquery。在标题中,您将找到:
<script src="{{ asset('js/app.js') }}" defer ><script>
我刚刚删除了'defer',jquery开始了
<script src="{{ asset('js/app.js') }}" ></script>
为什么您的
在结账后
?为什么您的
在结账后
?