猿问

使用laravel mix将Datatables JS逻辑放在laravel中的何处?

我对这一切都很陌生。我很抱歉这个奇怪的问题。


我打算使用 Yajra Datatables Package 在 Laravel 中显示一些动态表。我安装了 Laravel Mix。显然数据表需要 js 逻辑才能像使用 ajax 发送/获取东西一样工作。


在Laravel Mix Docs 中,它说:


类似于使用 mix.styles() 组合样式表,您也可以使用 scripts() 方法组合和缩小任意数量的 JavaScript 文件


如果我这样做,我所有需要 js 的页面是否也将包含特定表的此特定数据表逻辑?这个可以吗?


Ive mix 安装但我仍然应该使用“public/js”目录在需要时包含这些类型的脚本吗?


tldr; 我应该将 datatables 包所需的 js 逻辑放在 laravel 的什么位置?


编辑:这是一些示例代码。我应该把这个放在哪里?我可以在相关的刀片视图中放入,但这是一个很好的方法吗?


 <script>

   $(document).ready( function () {

    $('#MyDatatable').DataTable({

           processing: true,

           serverSide: true,

           ajax: "{{ url('users-all') }}",

           columns: [{ data: 'id', name: 'id' },

                    { data: 'name', name: 'name' },

                    { data: 'email', name: 'email' },

                    { data: 'created_at', name: 'created_at' }]});});

  </script>


呼如林
浏览 137回答 1
1回答

精慕HU

基本上你所做的是正确的,但供参考:1.datatables首先通过 NPM 或 CDN添加到您的项目中。(jQuery之前不要忘记datatables)CDN<link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"><script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>新产品管理npm install datatables --save-dev在您的项目中导入数据表(例如,如果您使用 Laravel deafult app.js)import 'datatables/media/css/jquery.dataTables.css';import 'datatables';2.然后您有多个选项,但您可以stack('scripts')在布局文件中添加类似内容并将脚本包含在刀片视图中。例如:( master.blade.php示例布局)<!doctype html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <title>Layout</title></head><body>@yield('content')@stack('scripts')</body></html>dashbboard.blade.php (示例页面)@extends('layouts.master')@section('content')<h1>My Awesome Tables</h1><div id="MyDatatable"></div>@endsection@push('scripts')&nbsp; &nbsp; $(document).ready(function () {&nbsp; &nbsp; &nbsp; &nbsp; $('#MyDatatable').DataTable({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; processing: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; serverSide: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ajax: "{{ url('users-all') }}",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; columns: [{data: 'id', name: 'id'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data: 'name', name: 'name'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data: 'email', name: 'email'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data: 'created_at', name: 'created_at'}]&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });@endpush我们应该使用这种方法,因为您使用{{ url('users-all') }}所以它必须在刀片中,以便您可以打印它。否则,您可以在您的设备上使用它app.js并以其他方式添加您的 url 端点。
随时随地看视频慕课网APP
我要回答