Solution to use AdminLTE (bootstrap 4) with Laravel Datatables 10

[Eduardo.]

Hi,
This a small solution when you want use Bootstrap 4 (for example AdminLTE)

This tutorial is from: https://yajrabox.com/docs/laravel-datatables/10.0/quick-starter

1. First, install the package as always.

composer require yajra/laravel-datatables

2. Create to dataTable

php artisan datatables:make Users

Content file

namespace App\DataTables;
 
use App\Models\User;
use Illuminate\Database\Eloquent\Builder as QueryBuilder;
use Yajra\DataTables\EloquentDataTable;
use Yajra\DataTables\Html\Builder as HtmlBuilder;
use Yajra\DataTables\Html\Button;
use Yajra\DataTables\Html\Column;
use Yajra\DataTables\Services\DataTable;
 
class UsersDataTable extends DataTable
{
    public function dataTable(QueryBuilder $query): EloquentDataTable
    {
        return (new EloquentDataTable($query))->setRowId('id');
    }
 
    public function query(User $model): QueryBuilder
    {
        return $model->newQuery();
    }
 
    public function html(): HtmlBuilder
    {
        return $this->builder()
                    ->setTableId('users-table')
                    ->columns($this->getColumns())
                    ->minifiedAjax()
                    ->orderBy(1)
                    ->selectStyleSingle()
                    ->buttons([
                        Button::make('add'),
                        Button::make('excel'),
                        Button::make('csv'),
                        Button::make('pdf'),
                        Button::make('print'),
                    ]);
    }
 
    public function getColumns(): array
    {
        return [
            Column::make('id'),
            Column::make('name'),
            Column::make('email'),
            Column::make('created_at'),
            Column::make('updated_at'),
        ];
    }
 
    protected function filename(): string
    {
        return 'Users_'.date('YmdHis');
    }
}

I'm removing the button: reset and reload (I don't know why get an errors)

3. The controller: app/Http/Controllers/UsersController.php

namespace App\Http\Controllers;
 
use App\DataTables\UsersDataTable;
 
class UsersController extends Controller
{
    public function index(UsersDataTable $dataTable)
    {
        return $dataTable->render('users.index');
    }
}

4. The view: resources/views/users/index.blade.php

@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <h1>Dashboard</h1>
@stop

@section('content')
        <div class="card">
        <div class="card-header">Manage Menu</div>
        <div class="card-body">
            {{ $dataTable->table(['class' => 'table table-bordered'], true) }}
        </div>
    </div>
@stop

@section('css')
<link href="https://cdn.datatables.net/v/bs4/jszip-3.10.1/dt-1.13.6/af-2.6.0/b-2.4.2/b-colvis-2.4.2/b-html5-2.4.2/b-print-2.4.2/cr-1.7.0/date-1.5.1/fc-4.3.0/fh-3.4.0/kt-2.10.0/r-2.5.0/rg-1.4.0/rr-1.4.1/sc-2.2.0/sb-1.5.0/sp-2.2.0/sl-1.7.0/sr-1.3.0/datatables.min.css" rel="stylesheet">
@stop

@section('js')
<script src="https://cdn.datatables.net/v/bs4/dt-1.13.6/b-2.4.2/b-colvis-2.4.2/b-print-2.4.2/datatables.min.js"></script>

{{ $dataTable->scripts() }}
@stop

This is the result

The unique problem is that can't see a navbar button.

To generate the cdn dataTables https://datatables.net/download/

[Arjay Angeles]

Thanks for sharing your solution 🍻!