홈>
Laravel Framework 5.7.19
를 사용하고 있습니다
블레이드 뷰에서 다음 예제를 다시 만들고 싶습니다. 맞춤 필터링-범위 검색
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>
에서
datatables.blade.php
예와 같이 미리 채워진 데이터로 데이터 테이블을 정의하고 있습니다.
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="">
<table border="0" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td>Minimum age:</td>
<td><input type="text" id="min" name="min"></td>
</tr>
<tr>
<td>Maximum age:</td>
<td><input type="text" id="max" name="max"></td>
</tr>
</tbody>
</table>
<table id="example" class="display" style="width:100%">
<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>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
@endsection
내 데이터 테이블이 올바르게로드되지 않은 것을 볼 수 있습니다 :
또한 크롬 개발자 콘솔에 다음 오류가 발생합니다.
내가 뭘 잘못하고 있는가?
- 답변 # 1
- 답변 # 2
이것은 저에게 효과적이었습니다. jquery가 정상적으로로드되었지만 작동하지 않습니다.
navra/login 시스템을 설정할 때 Laravel이 jquery를 호출한다는 것을 알았습니다. 헤더에는 다음이 있습니다.
<script src="{{ asset('js/app.js') }}" defer ><script>
방금 '지연'을 삭제하고 jquery가 시작되었습니다.
<script src="{{ asset('js/app.js') }}" ></script>
관련 자료
- eloquent - Laravel에서 eager loading에서 중첩 데이터를 얻는 방법은 무엇입니까?
- Laravel - 라 라벨 - hasmany 관계가로드되지 않음
- javascript - jQuery ajax를 사용하여 div에 html 페이지를로드하려고했습니다
- php - 입력 유형 파일 여러 jQuery laravel
- javascript - CDN에서 jquery 스크립트를로드하는 것은 작동하지만 IIS에서 동일한 스크립트를로드하면 잘못된 문자가 생성됩니까?
- javascript - Laravel 7- DataTable jQuery에서 데이터베이스의 데이터를 표시하기 위해 ajax를 사용하는 방법
- php - Laravel을 사용하여 bulma에서 모달로드 문제
- javascript - jquery loading div에 타이머를 추가하는 방법은 무엇입니까?
- Laravel 58 앱의 cdn을 제외하고 node_modules에서 JQuery를 포함시키는 방법은 무엇입니까?
- php - 콘솔에 새 페이지가 표시되지만 laravel jquery ajax가 리디렉션되지 않습니다
- 자바 스크립트를 사용하여 동적으로 HTML 페이지를 만들 때 Jquery 스크립트가로드되지 않습니다
- javascript - laravel 전체 달력이 테마 JQuery 및 부트 스트랩과 작동하지 않습니다
- JQuery와 부트 스트랩 다단계 양식을 사용하여 Laravel의 컨트롤러 메소드에 데이터를 게시하고 요청하는 방법은 무엇입니까?
- jquery 유효성 검사를 확인할 때 패널로드를 중지하는 방법
- 관계 데이터로 웅변하는 라 라벨 (Eager Loading)
관련 질문
- jQuery /JavaScript 사용자 정의 및 Ajax XHR 요청 및 오류 처리
- javascript : 여러 성공 응답 ajax 후 한 번 양식을 제출하는 방법
- php : DB SummerNote TextArea에 데이터를 삽입하십시오
- javascript : 동적 접근 방식으로 선택한 라디오 버튼 값 가져 오기
- laravel : 데이터 테이블에서 데이터를 호출 할 때 알 수없는 매개 변수 이름
- javascript : DataTables.js 열의 셀에 부트 스트랩 속성 추가
- 동적 테이블 행에 jquery 데이터 테이블 사용
- javascript : 수동으로 jquery Datatable 검색 트리거
- javascript : 왜 정의되지 않은 이유는 무엇입니까? Firebase에 데이터가있는 동안
- javascript : jQuery AddClass 및 TogGleclass가 작동하지 않습니다
오류가 JQuery를로드하는 것과 관련이 없습니다. 데이터 테이블 사용자 정의 함수가 ready () 함수 외부에 있어야합니다.