使用 laravel mix 将 Datatables JS 逻辑放在哪里？答案

【问题标题】：Where to put Datatables JS logic in laravel using laravel mix?使用 laravel mix 将 Datatables JS 逻辑放在哪里？
【发布时间】：2019-07-30 14:42:35
【问题描述】：

我对这一切都不熟悉。很抱歉这个奇怪的问题。

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

Laravel Mix Docs 中写道：

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

如果我这样做，我所有需要 js 的页面是否也会包含特定表的特定 Datatables 逻辑？这样可以吗？

我已经混合安装了，但我是否仍应在需要时使用“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>

【问题讨论】：

也有点不相关，但是我应该使用 npm 版本的数据表来代替吗？是不是更好，或者更容易为新手使用？：npmjs.com/package/datatables

标签： php laravel datatables laravel-5.8 laravel-mix

【解决方案1】：

你所做的基本上是正确的，但仅供参考：

1.首先通过 NPM 或 CDN 将datatables 添加到您的项目中。（别忘了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

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>
    <meta charset="UTF-8">
    <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')
    $(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'}]
        });
    });
@endpush

我们应该使用这种方法，因为您使用{{ url('users-all') }}，所以它必须在刀片中以便您可以打印它。否则，您可以在 app.js 上使用它并以其他方式添加您的 url 端点。

【讨论】：

堆栈看起来不错。万分感谢。顺便说一句，我应该使用 laravel 文档中的 api auth 东西来使用 ajax 吗？
欢迎您。如果有用，请将答案视为已接受。是的，您应该使用相应的 CSRF 令牌。更多信息laravel.com/docs/5.8/csrf#csrf-x-csrf-token
我在说这个：laravel.com/docs/5.8/api-authentication 你给用户一个 api_token 并在 api 调用期间期望它？你也是你的 api 路由而不是 web 路由？这些真的有必要吗？还有一个散列版本需要它的附加页面来初始化和刷新散列令牌。我真的不明白。您甚至将该令牌保存在客户端的哪里？饼干？
在这种情况下我不知道该怎么做对不起。