Здравствуйте, я настроил yajra datatables, все успешно работает, но сейчас хочу реализовать это совместно с laravel-breeze, но у меня не получается этого сделать. Не выводятся данные таблицы, отображаются только заглавия столбцов, в чем может быть проблема? Ниже я представил 2 листинга: -в первом просто реализация yajra datatables (я не стал приводить роутинг и контроллеры, т.к. все работает, перестает работать только при изменении шаблона index.blade.php, поэтому я привожу только его, но если нужно что-то еще только скажите) -моя попытка реализовать yajra datatables при помощи компонентов laravel-breeze Также привел скрины до(1) и после(2)... Листинг 1 HTML: <!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/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/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 HTML: <x-app-layout> <x-slot name="header"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/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/bootstrap@5.1.0/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
Ну читать надо доку чё там и к чему... Или инициализация как то по другому, или может не все что нужно подключил... Кто ж его знает
Что-то с авторизацией не так. То есть таки в маршрутах или контроллерах. Только не надо выкладывать весь проект. Отлаживайся: поставь брейкпоинты там где datatables отдаёт данные для отрисовки, пробуй отключать/подключать автоиризующие мидвары. --- Добавлено --- Ну и конечно логи надо смотреть. Может там есть ошибки. Короче, надо лучше стараться.
как можно заметить, я не самый опытный... Соответственно, в контроллерах написано всё по документации на минимальном уровне (для yajra datatable это resource контроллер и пара контроллеров со стандартным функционалом FormatDataTable и FormatDataTableEditor). Маршрут тоже самый обычный PHP: Route::resource('/service/formats', FormatController::class); Также, они друг без друга отлично работают... Спасибо за вектор, в каком направлении разбираться. P.S. но если у вас будет время одним глазом взглянуть, что у меня не так, буду очень благодарен https://github.com/volnistii11/archive
Перечитав кучу всего, я пришел к выводу, может быть мне нужно где-то csrf токен добавить куда-нибудь в ajax(я просто не очень понимаю куда)?
Посмотри в консоли xhr запрос уходит к бэку за данными? Если уходит - то какой ответ (статус ответа) 419 ? Если да то точно токен скорее всего сюда: PHP: var token = $("meta[name=csrf-token]").attr("content"); var editor = new $.fn.dataTable.Editor({ ajax: "/service/formats", table: "#format-table", display: "bootstrap", fields: [ {label: "Наименование формата:", name: "name", _token: token}, ] });
Исходя из принципа "мы не кормим рыбой, а учим её ловить", скажу: тебе надо точно выяснить ошибку чтобы знать что делать дальше. Если возникает ошибка на стороне клиента, её можно найти в инспекторе. Если на стороне сервера, то в логах Laravel. Не надо вставлять токены просто на всякий случай.
@artoodetoo @ADSoft Хм, решил в консоль заглянуть, и увидел предупреждения и ошибку, которых нету в варианте без laravel-breeze. Решил убрать эдитор, чтобы посмотреть, что будет дальше, он начал жаловаться теперь на саму DataTable.
интересно то, что я не использую никаких своих скриптов. Только стандартные для breeze и datatable. И по отдельности они работают.
Какие-то не подключились. Все собираете через Laravel Mix? Я бы предложил jQuery и эту фигню вынести наружу. Или была какая-то настройка веб-пака, чтоб он часть скриптов оставлял в глобальном пространстве, а не засовывал в свою замысловатую систему. Только я её последний раз пользовался года 4 назад, поэтому не помню точно. Поищите.
Нет, Laravel mix не использую, да и не использовал никогда еще, пока только с этим разбираюсь, почитаю про него, спасибо. Я просто подключал несколько js и css по отдельности, ну это видно в листинге
Судя по скрину консоли, что-то не так подключили. Если микс не использовали тут, то и не надо Он далеко не всегда удобен
Так в шапке поста весь мой js. Или я чего-то не понимаю... Может быть так удобней будет https://github.com/volnistii11/archive/blob/master/resources/views/service/format/index.blade.php
О, такие компоненты в ларавел появились в тот период, когда я на нём не писал новых проектов, а сопровождал огромный проект на старой версии. Так что я ещё не в курсе. Надо посмотреть, точно ли этот пуш в таком варианте срабатывает.
Да я и без push пробовал, как видно в варианте в шапке поста, ошибка одна и та же остается, в network браузера тоже ничего не меняется... Может ли это быть как-то связано с пространством имен в javascript? Просто предположение, т.к. я в js вообще ничего не понимаю...