홈>
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 Datatables는 테이블을 다시 로드한 후 클래스와 입력을 기억합니다.
- php : laravel 오류: 빈 값에서 기본 객체 생성 Laravel 8
- jquery : laravel에서 여러 파일을 저장하는 방법
- jquery : vue 3 및 Laravel을 사용하여 스토리지 파일 다운로드
- javascript : jQuery 데이터 테이블은 tr에 클래스를 추가합니다.
- javascript : Datatables에 클릭 이벤트 추가
- javascript : 페이지에 슬라이더가 두 개 이상 있는 경우 슬라이더가 올바르게 작동하지 않습니다.
- JQuery DataTable에서 기본적으로 모든 행을 표시하는 방법
- javascript : jQuery를 사용하여 모달을 수정하는 방법이 작동하지 않습니다.
- javascript : Laravel에서 Ajax 및 puglin Krajee 파일 입력을 사용하여 컨트롤러에 파일을 보내려고 합니다.
오류가 JQuery를로드하는 것과 관련이 없습니다. 데이터 테이블 사용자 정의 함수가 ready () 함수 외부에 있어야합니다.