Laravel DataTables Yajrabox Not Displaying Data

Question

I am facing this problem from last few days and cannot find any solution for this. I am using YajraTables , and as output JSON result i am getting "c" at starting of every json it renders.

I am also getting same error when i use php artisan command

PHP Version: 7.2.11 Laravel Version: 5.7.19

Here are some screens of error:

Error on Command Line using Artisan

Error on HTML Screen

JSON Error:

Raw JSON which shows "c" in starting of every JSON response of Yajra Tables

Here is how i included YajraTables

Controller Code:

public function users(){

    $accounts = Accounts::select(['id', 'name', 'mobile', 'address', 'city'])->get();

    return Datatables::of($accounts)
        ->addColumn('action', function ($accounts) {
            return '<a href="bills/'.$accounts->id.'" class="btn btn-xs btn-primary btn-sm"><i class="glyphicon glyphicon-edit"></i> View Bills</a><a href="edit_accounts/'.$accounts->id.'" class="btn btn-xs btn-primary btn-sm"><i class="glyphicon glyphicon-edit"></i> Edit</a><a href="javascript:void(0);" class="btn delete_account btn-sm btn-xs btn-danger" data-id="'.$accounts->id.'"><i class="fa fa-trash-alt"></i> Delete</a>';
        })
        ->editColumn('id', 'ID: {{$id}}')
        ->make(true);

}

Javascript Code:

$(function() {
    $('#users-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{!! route('users') !!}',
        columns: [
            { data: 'name', name: 'name' },
            { data: 'mobile', name: 'mobile' },
            { data: 'address', name: 'address' },
            { data: 'city', name: 'city' },
            {data: 'action', name: 'action', orderable: false, searchable: false}
        ]
    });
});

HTML Code:

<table class="table table-bordered" id="users-table">

                    <thead>

                    <tr>
                        <th>Name</th>
                        <th>Mobile</th>
                        <th>Address</th>
                        <th>City</th>
                        <th>Action</th>
                    </tr>

                    </thead>

                </table>

Please help me with this. Thanks in advance.

Answer 1

SOLUTION 1 Look for this file in your project

vendor/datatables/buttons.server-side.js

The copy it and put it in your assets public folder and then make sure you include it as a scribe before

{{ $dataTable->scripts() }}

so, it should be like this

<script src="{{ url('/') }}/assets/js/buttons.server-side.js"></script>
{{ $dataTable->scripts() }}

and hopefully it will be fixed.

SOLUTION 2 Remove buttons. On your build method in the datatable class, remove buttons by adding something like this

 ->parameters([
        'dom' => 'Bfrtip',
        'buttons' => [],
    ]);

So, the final thing should look like this

public function html()
{
    return $this->builder()
                ->setTableId('users-table')
                ->columns($this->getColumns())
                ->minifiedAjax()
                ->dom('Bfrtip')
                ->orderBy(1)
                -->parameters([
                    'dom' => 'Bfrtip',
                    'buttons' => [],
                ]);
}

CONCLUSION If you still get an error, go to inspect and see if there is any warning. All the best!

Answer 2

Change it to

public function users(){

    $accounts = Accounts::select(['id', 'name', 'mobile', 'address', 'city']);

     return DataTables::eloquent($accounts)
        ->addColumn('action', function ($account) {
            return '<a href="bills/'.$account->id.'" class="btn btn-xs btn-primary btn-sm"><i class="glyphicon glyphicon-edit"></i> View Bills</a><a href="edit_accounts/'.$account->id.'" class="btn btn-xs btn-primary btn-sm"><i class="glyphicon glyphicon-edit"></i> Edit</a><a href="javascript:void(0);" class="btn delete_account btn-sm btn-xs btn-danger" data-id="'.$account->id.'"><i class="fa fa-trash-alt"></i> Delete</a>';
        })
        ->editColumn('id', 'ID: {{$id}}')
        ->rawColumns(['action'])
        ->toJson();

}

and let me know, if you are getting any error now. Do not forget to specify raw column, when you are adding html.

it seems you have added unnecessary character in some place, but I would like you to test with

->addColumn('action','<a href="bills/'.$accounts->id.'" class="btn btn-xs btn-primary btn-sm"><i class="glyphicon glyphicon-edit"></i> View Bills</a><a href="edit_accounts/'.$accounts->id.'" class="btn btn-xs btn-primary btn-sm"><i class="glyphicon glyphicon-edit"></i> Edit</a><a href="javascript:void(0);" class="btn delete_account btn-sm btn-xs btn-danger" data-id="'.$accounts->id.'"><i class="fa fa-trash-alt"></i> Delete</a>';
        );

check it it works, if you will ask me, I will put this in a blade/partial and use as

 ->addColumn('action', function(Video $account){
       return view('tagging.video-checkbox', compact('account'))->render();
 });