Table does not render (Yajra Datatables)

Question

So, this is my controller:

use Yajra\DataTables\Facades\DataTables;
class CategoriasController extends Controller
{
    public function index()
    {
        return Datatables::collection(Categoria::all())->make(true);
    }
 [...]
}

this is my route:

Route::group(['middleware' => 'auth'], function () {
    Route::group(['middleware' => 'admin'], function () {   
        Route::prefix('admin')->namespace('Admin')->group(function () {
            Route::prefix('categorias')->group(function(){
                Route::get('/', 'CategoriasController@index')->name('curso.index');
[...]
             });
         });
     });
});

and this is my blade:

[...]
<div class="container">
    <table class="table border" id="myTable">
        <thead>
            <tr>
                <th>id</th>
                <th>Nome</th>
                <th>Criado</th>
                <th>Modificado</th>
            </tr>
        </thead>
    </table>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready( function () {
    $('#myTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{!! route('categoria.index') !!}',
        columns: [
                { data: 'id', name:'id'},
                { data: 'nome', name:'nome'},
                { data: 'created_at', name:'created_at'},
                { data: 'updated_at', name:'updated_at'},
            ]
    });
} );
</script>
[...]

And I got this as a return:

Print

I'm using Laravel 5.8.19

composer.json

[...]
"require":{
        "yajra/laravel-datatables": "^1.5",
        "yajra/laravel-datatables-oracle": "~9.0"
}

So why is not a table rendering? Is it something I'm doing wrong? I ran the internet and I did not find a solution, I hope you will help me

score 1 · Answer 1 · answered Jun 02 '19 at 04:46

My problem was that when the controller function was called it returned the data directly. I solved the problem by entering a conditional if the request was ajax, so when the page is called for the first time it returns the view and when loaded and jquery makes the request again the controller would return the data.

My Controller now:

use Yajra\DataTables\Facades\DataTables;

class CategoriasController extends Controller
{
    public function index()
    {
        if(request()->ajax()){
            return Datatables::collection(Categoria::all())->make(true);
        }

        return view('admin.categorias.index');
    }
 [...]
}

score 0 · Answer 2 · answered Jun 01 '19 at 10:40

You should create a datatable class for category and use it on controller

On your datatable class :

namespace App\DataTables;

use Illuminate\Support\Facades\App;
use Yajra\DataTables\Services\DataTable;

class CategoriasDataTable extends DataTable
{
    /**
     * Build DataTable class.
     *
     * @param mixed $query Results from query() method.
     *
     * @return \Yajra\DataTables\DataTableAbstract
     */
    public function dataTable($query)
    {
        return datatables($query);
    }

    /**
     * Get query source of dataTable.
     *
     * @param App\Models\Category $model
     *
     * @return \Illuminate\Database\Eloquent\Builder
     */
    public function query(Category $model)
    {
        return $model
            ->newQuery()
            ->select('*');
    }

    /**
     * Optional method if you want to use html builder.
     *
     * @return \Yajra\DataTables\Html\Builder
     */
    public function html()
    {
        return $this->builder()
                    ->columns($this->getColumns())
                    ->minifiedAjax()
                    ->addAction(['width' => '100px'])
                    ->parameters($this->getBuilderParameters());
    }

    /**
     * Get columns.
     *
     * @return array
     */
    protected function getColumns()
    {
        return [
            [
                'data'  => 'id',
                'name'  => 'id',
                'title' => 'Id',
            ],
            [
                'data'  => 'name',
                'name'  => 'name',
                'title' => 'Name',
            ],
            [
                'data'  => 'created_at',
                'name'  => 'created_at',
                'title' => 'Created At',
            ],
            [
                'data'  => 'updated_at',
                'name'  => 'updated_at',
                'title' => 'Updated At',
            ],
        ];
    }
}

On you Controller :

use App\DataTables\UsersDataTable;
class CategoriasController extends Controller
{

    /**
     * Display a listing of the resource.
     *
     * @param App\DataTables\CategoriasDataTable $datatable
     *
     * @return \Illuminate\Http\Response
     */
    public function index(CategoriasDataTable $datatable)
    {
        return $datatable->render('admin.categorias.index');
    }
 .......

I hope this will help you

Table does not render (Yajra Datatables)

2 Answers2