Laravel 和数据表 AJAX答案

【问题标题】：Laravel and Datatables AJAXLaravel 和数据表 AJAX
【发布时间】：2019-03-08 11:50:24
【问题描述】：

我确信这个问题可能很久以前就被问过了，但我在网上到处搜索，并没有完全得到我想要的结果。

我正忙着构建一个使用 Datatables Jquery 插件的应用程序，一切似乎都在工作，因为我可以访问路由并且数据被传递到前端，但我的表中没有显示任何数据。

这是我的控制器功能：

public function index()
{
    return view('pages.admin.artikels.index');
}

public function getArticles()
{
    return DataTables::of(Post::query())->make();
}

还有我的路线文件：

Route::middleware(['super'])->group(function () {
Route::get('/super/artikels/', 'AdminPostsController@index')->name('super.artikels');
Route::get('/artikels/data', 'AdminPostsController@getArticles')->name('article.data');

});

还有我的刀片文件

    @extends('layouts.app')

@section('page_title')
Artikel Administrasie
@endsection

@section('content')
    <div class="container">
        <div class="card">
            <div class="card-body">
                <h5 class="text-teal-dark mb-3 font-weight-bold">
                    <span class="fa fa-angle-double-right text-orange"></span> Artikel Administrasie
                </h5>
                <div id="formContainer">
                    <table id="articles" class="table bg-white table-striped">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Title</th>
                                <th>Body</th>
                                <th>Author</th>
                                <th>Published</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
<script>
    $('#articles').DataTable({
        serverSide: false,
        processing: false,
        ajax: "{{ route('article.data') }}",
        columns: [
            { data: 'id' },
            { data: 'title' },
            { data: 'body' },
            { data: 'user_id' },
            { data: 'created_at' },
        ]
    });
</script>
@endpush

这是前端查看 Xhr 时的响应

    {draw: 0, recordsTotal: 2, recordsFiltered: 2, data: [,…], queries: [,…], input: {_: "1538557939697"}}
data: [,…]
0: {id: "1", title: "Toets Artikel", slug: "toets-artikel", image: "", body: "This is a test article",…}
1: {id: "2", title: "Toets Artikel 2", slug: "toets-artikel-twee", image: "",…}
draw: 0
input: {_: "1538557939697"}
queries: [,…]
recordsFiltered: 2
recordsTotal: 2

对于此事的任何帮助将不胜感激

【问题讨论】：

在`$(document).ready(function () {})`和make(true);中添加脚本
当这样做时它返回 jQuery.Deferred 异常：$(...).DataTable is not a function TypeError: $(...).DataTable is not a function...jQuery 已加载在页面上，当我将其从 $(doument).ready() 中删除时，它不会出现错误
为了记录，所有这些逻辑都可以使用github.com/yajra/laravel-datatables（Laravel Datatables API）大大简化
我正在使用那个库
你为datatable添加了包吗？

标签： jquery laravel datatables

【解决方案1】：

可能是列有问题，试试docs建议的格式：

<script>
    $('#articles').DataTable({
        serverSide: false,
        processing: false,
        ajax: "{{ route('article.data') }}",
        columns: [
            {data: 0, name: 'id'},
            {data: 1, name: 'title'},
            {data: 2, name: 'body'},
            {data: 3, name: 'created_at'},
            {data: 4, name: 'updated_at'}
        ]
    });
</script>

【讨论】：

没试过，只返回错误：请求未知参数
查看文档，在评论中：return Datatables::of($articles)->make(true);
传递 true 不会产生影响结果保持不变
{draw: 1, recordsTotal: 2, recordsFiltered: 2, data: [,…], queries: [,…],…} data: [,…] draw: 1 input: {draw : "1", columns: [,…], order: [{column: "0", dir: "asc"}], start: "0", length: "10",…} 查询: [,…] recordsFiltered: 2 recordsTotal: 2
那一定是客户端错误。必须这样做：在$(document).ready(function () {}) 和make(true); 中添加脚本。见stackoverflow.com/questions/31227844/…

【解决方案2】：

嘿伙计们，我通过将 jQuery 函数从刀片中移出并进入管理我的 ajax 源的 sn-p 来修复它。感谢您的帮助

【讨论】：