Использование yajra datatables вместе с laravel-breeeze
я настроил yajra datatables, все успешно работает, но сейчас хочу реализовать это совместно с laravel-breeze, но у меня не получается этого сделать. Не выводятся данные таблицы, отображаются только заглавия столбцов, в чем может быть проблема? Ниже я представил 2 листинга:
-в первом просто реализация yajra datatables (я не стал приводить роутинг и контроллеры, т.к. все работает, перестает работать только при изменении шаблона index.blade.php, поэтому я привожу только его, но если нужно что-то еще только скажите)
-моя попытка реализовать yajra datatables при помощи компонентов laravel-breeze
Также привел скрины до(1) и после(2)... Листинг 1 Listing 1, all works.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Format Documents</title>
{{-- bootstrap --}}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
crossorigin="anonymous"></script>
{{-- jquery --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
{{-- datatables --}}
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.0/css/dataTables.bootstrap5.min.css">
<script src="https://cdn.datatables.net/1.11.0/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.0/js/dataTables.bootstrap5.min.js"></script>
{{-- buttons--}}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.0.0/css/buttons.bootstrap5.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.0/js/dataTables.buttons.js"></script>
<script src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.bootstrap5.min.js"></script>
<script src="/vendor/datatables/buttons.server-side.js"></script>
{{-- select--}}
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.3/css/select.bootstrap.min.css">
<script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<script src="{{asset('plugins/editor/js/dataTables.editor.js')}}"></script>
<script src="{{asset('plugins/editor/js/editor.bootstrap5.min.js')}}"></script>
</head>
<body>
<section style="padding-top: 60px;">
<div class="container">
{!! $dataTable->table(['id' => 'format-table'], true) !!}
</div>
</section>
<script>
$(function () {
var editor = new $.fn.dataTable.Editor({
ajax: "/service/formats",
table: "#format-table",
display: "bootstrap",
fields: [
{label: "Formats name:", name: "name"},
]
});
$('#format-table').on('click', 'tbody td:not(:first-child)', function (e) {
editor.inline(this);
});
{{$dataTable->generateScripts()}}
})
</script>
</body>
Листинг 2.
<x-app-layout>
<x-slot name="header">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.0/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.0.0/css/buttons.bootstrap5.css"/>
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.3/css/select.bootstrap.min.css">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Dashboard') }}
</h2>
</x-slot>
<x-content-body>
<section style="padding-top: 60px;">
<div class="container">
{!! $dataTable->table(['id' => 'format-table'], true) !!}
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.11.0/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.0/js/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.0/js/dataTables.buttons.js"></script>
<script src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.bootstrap5.min.js"></script>
<script src="/vendor/datatables/buttons.server-side.js"></script>
<script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<script src="{{asset('plugins/editor/js/dataTables.editor.js')}}"></script>
<script src="{{asset('plugins/editor/js/editor.bootstrap5.min.js')}}"></script>
<script>
$(function () {
var editor = new $.fn.dataTable.Editor({
ajax: "/service/formats",
table: "#format-table",
display: "bootstrap",
fields: [
{label: "Наименование формата:", name: "name"},
]
});
$('#format-table').on('click', 'tbody td:not(:first-child)', function (e) {
editor.inline(this);
});
{{$dataTable->generateScripts()}}
})
</script>
</x-content-body>
</x-app-layout>
1
2
