Laravel-datatables: データテーブルにデータが表示されない

作成日 2020年02月03日  ·  15コメント  ·  ソース: yajra/laravel-datatables

Laravel 6.5.2、PHP 7.2.26(7.3.3も試してください)および "yajra / laravel-datatables": "v1.5.0"を使用してください。
データテーブルが表示されますが、データがありません。
モデルアパートメントにはデータが含まれています。

ルート

Route::resource('apartments', 'ApartmentController')

コントローラ

<?php

namespace App\Http\Controllers;

use App\Apartment;
use App\DataTables\ApartmentDataTable;
use Yajra\DataTables\Services\DataTable;

class ApartmentController extends Controller
{
    public function qindex(ApartmentDataTable $dataTable)
    {
        return $dataTable->render('apartments.index');
    }
}

Datatableサービス

<?php

namespace App\DataTables;

use App\Apartment;
use Illuminate\Database\Eloquent\Builder;
use Yajra\DataTables\DataTableAbstract;
use Yajra\DataTables\Html\Button;
use Yajra\DataTables\Html\Column;
use Yajra\DataTables\Html\Editor\Editor;
use Yajra\DataTables\Html\Editor\Fields;
use Yajra\DataTables\Services\DataTable;

class ApartmentDataTable extends DataTable
{

    /**
     * Build DataTable class.
     *
     * <strong i="18">@param</strong> mixed $query Results from query() method.
     * <strong i="19">@return</strong> DataTableAbstract
     */
    public function dataTable($query)
    {
        return datatables()
            ->eloquent($query)
            ->addColumn('action', 'apartment.action');
    }

    /**
     * Get query source of dataTable.
     *
     * <strong i="20">@param</strong> Apartment $model
     * <strong i="21">@return</strong> Builder
     */
    public function query(Apartment $model)
    {
        return $model->newQuery();
    }

    /**
     * Optional method if you want to use html builder.
     *
     * <strong i="22">@return</strong> \Yajra\DataTables\Html\Builder
     */
    public function html()
    {
        return $this->builder()
                    ->setTableId('apartment-table')
                    ->columns($this->getColumns())
                    ->minifiedAjax()
                    ->dom('Bfrtip')
                    ->orderBy(1)
                    ->buttons(
                        Button::make('create'),
                        Button::make('export'),
                        Button::make('print'),
                        Button::make('reset'),
                        Button::make('reload')
                    );
    }

    /**
     * Get columns.
     *
     * <strong i="23">@return</strong> array
     */
    protected function getColumns()
    {
        return [
            Column::computed('action')
                  ->exportable(false)
                  ->printable(false)
                  ->width(60)
                  ->addClass('text-center'),
            Column::make('id'),
            Column::make('address'),
            Column::make('created_at'),
            Column::make('updated_at'),
        ];
    }

    /**
     * Get filename for export.
     *
     * <strong i="24">@return</strong> string
     */
    protected function filename()
    {
        return 'Apartment_' . date('YmdHis');
    }
}

見る

@extends('layouts.app')

@section('content')
    <div class="container py-4">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">Table</div>
                    <div class="card-body">
                        {{ $dataTable->table() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<strong i="7">@endsection</strong>

@push('scripts')
    <script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>
    {{ $dataTable->scripts() }}
<strong i="8">@endpush</strong>

ブラウザでの結果

<script type="text/javascript">
(function(window,$){window.LaravelDataTables=window.LaravelDataTables||{};window.LaravelDataTables["apartment-table"]=$("#apartment-table").DataTable({"serverSide":true,"processing":true,"ajax":{"url":"","type":"GET","data":function(data) {
            for (var i = 0, len = data.columns.length; i < len; i++) {
                if (!data.columns[i].search.value) delete data.columns[i].search;
                if (data.columns[i].searchable === true) delete data.columns[i].searchable;
                if (data.columns[i].orderable === true) delete data.columns[i].orderable;
                if (data.columns[i].data === data.columns[i].name) delete data.columns[i].name;
            }
            delete data.search.regex;}},"columns":[{"data":"action","name":"action","title":"Action","orderable":false,"searchable":false,"width":60,"className":"text-center"},{"data":"id","name":"id","title":"Id","orderable":true,"searchable":true},{"data":"address","name":"address","title":"Address","orderable":true,"searchable":true},{"data":"created_at","name":"created_at","title":"Created At","orderable":true,"searchable":true},{"data":"updated_at","name":"updated_at","title":"Updated At","orderable":true,"searchable":true}],"dom":"Bfrtip","order":[[1,"desc"]],"buttons":[{"extend":"create"},{"extend":"export"},{"extend":"print"},{"extend":"reset"},{"extend":"reload"}]});})(window,jQuery);
</script>
question

最も参考になるコメント

まず第一に私の英語をごめんなさい
私は同じ問題を抱えており、私のための解決策を見つけます
私が使用する場合
@section( 'content')
{{$ dataTable-> table()}}
@endsection

@push( 'scripts')
{{$ dataTable-> scripts()}}
@endpush

動作しません。 データなし/

しかし、 @ push@scriptsを使用しない場合は、

@section( 'content')
{{$ dataTable-> table()}}
{{$ dataTable-> scripts()}}
@endsection

これが正しいかどうかはわかりませんが、この作業です。

bottstrap.jsにこのようなコードを貼り付けます

`試してみてください{
window.Popper = require( 'popper.js')。default;
window。$ = window.jQuery = require( 'jquery');

require('bootstrap');
require('datatables.net-bs4');
require('datatables.net-buttons-bs4');

} catch(e){} `

app.blade.phpで

    <script src="{{ asset('js/app.js') }}"></script>
    <script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>

そしてそれはうまくいきます

全てのコメント15件

多分インデックスのタイプミス?

// should be index
public function qindex(ApartmentDataTable $dataTable)

いいえ....私はテストのためにこれを行い、誤ってコピーしました。

コードは正常に見えます。 コンソールにエラーはありますか?

どこにもエラーはありません...

$ dataTable-> scripts()はコードを生成します:

<script type="text/javascript">(function(window,$){window.LaravelDataTables=window.LaravelDataTables||{};window.LaravelDataTables["apartment-table"]=$("#apartment-table").DataTable({"serverSide":true,"processing":true,"ajax":{"url":"","type":"GET","data":function(data) {
            for (var i = 0, len = data.columns.length; i < len; i++) {
                if (!data.columns[i].search.value) delete data.columns[i].search;
                if (data.columns[i].searchable === true) delete data.columns[i].searchable;
                if (data.columns[i].orderable === true) delete data.columns[i].orderable;
                if (data.columns[i].data === data.columns[i].name) delete data.columns[i].name;
            }
            delete data.search.regex;}},"columns":[{"data":"action","name":"action","title":"Action","orderable":false,"searchable":false,"width":60,"className":"text-center"},{"data":"id","name":"id","title":"Id","orderable":true,"searchable":true},{"data":"address","name":"address","title":"Address","orderable":true,"searchable":true},{"data":"created_at","name":"created_at","title":"Created At","orderable":true,"searchable":true},{"data":"updated_at","name":"updated_at","title":"Updated At","orderable":true,"searchable":true}],"dom":"Bfrtip","order":[[1,"desc"]],"buttons":[{"extend":"create"},{"extend":"export"},{"extend":"print"},{"extend":"reset"},{"extend":"reload"}]});})(window,jQuery);
</script>

dd($ dataTable-> ajax());を置くと戻る前にコントローラーで、完全なデータを含むIlluminate \ HttpJsonResponseがあります。

まず第一に私の英語をごめんなさい
私は同じ問題を抱えており、私のための解決策を見つけます
私が使用する場合
@section( 'content')
{{$ dataTable-> table()}}
@endsection

@push( 'scripts')
{{$ dataTable-> scripts()}}
@endpush

動作しません。 データなし/

しかし、 @ push@scriptsを使用しない場合は、

@section( 'content')
{{$ dataTable-> table()}}
{{$ dataTable-> scripts()}}
@endsection

これが正しいかどうかはわかりませんが、この作業です。

bottstrap.jsにこのようなコードを貼り付けます

`試してみてください{
window.Popper = require( 'popper.js')。default;
window。$ = window.jQuery = require( 'jquery');

require('bootstrap');
require('datatables.net-bs4');
require('datatables.net-buttons-bs4');

} catch(e){} `

app.blade.phpで

    <script src="{{ asset('js/app.js') }}"></script>
    <script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>

そしてそれはうまくいきます

そして、私が使用するときに私も気づきました

私も同じ問題を抱えていました。 レイアウト(app.blade)に@Stack( 'scripts')を追加して解決しました。 そのようです

<script src="{{ asset('js/app.js') }}"></script>
@stack('scripts')

それはまだ私と一緒に働いていません、私は上記のすべてのことをしました、そしてそれでもデータは表示されません、誰かが私を助けてくれます

それを機能させるために私がしたこと(Laravel 7):

resources/js/bootstrap.jsを編集し、以下を追加します。

require('bootstrap');
require('datatables.net-bs4');
require('datatables.net-buttons-bs4');

resources/scss/app.scssを編集し、以下を追加します。

// DataTables
<strong i="12">@import</strong> "~datatables.net-bs4/css/dataTables.bootstrap4.css";
<strong i="13">@import</strong> "~datatables.net-buttons-bs4/css/buttons.bootstrap4.css";

次に、

<script src="{{ mix('js/app.js') }}"></script>
// instead of 
<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>

スクリプトを一番下に移動します

@stack('scripts')
</body>
</html>

まだ私に取り組んでいない

タイプミスが原因でスクリプトが読み込まれない問題を修正しました
問題はデフォルトのレイアウトファイルの下部にあります@yield('footer_scripts')が、table.bladeファイルには@section('footerscripts')
他の誰かがより詳細に説明することを願っています。

このページは役に立ちましたか?
0 / 5 - 0 評価