How can I use Datatables outside of CrudControllers?

Question

I am using Laravel 11 and Backpack v6 with Tabler.

I am creating a custom page that won't use Backpack's CRUD operations and instead has some logic for querying a database table and displaying it using Datatables for easy sorting etc.

I would like the look of the Datatable to look similar to the list methods on Backpack's crud controllers but I am unsure of the best way to do this.

I have tried this in my custom blade view:

@extends(backpack_view('blank'))

@section('content')
<table id="custom-datatable" class="table">
    <thead>
        <tr>
            <th>Appointment ID</th>
            <th>Pet Name</th>
            <th>Owner Name</th>
            <th>Breed</th>
            <th>Appointment Date</th>
            <th>Veterinarian</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>AP001</td>
            <td>Max</td>
            <td>John Smith</td>
            <td>Golden Retriever</td>
            <td>2024-11-22</td>
            <td>Dr. Emily Green</td>
            <td>Confirmed</td>
        </tr>
        <tr>
            <td>AP002</td>
            <td>Bella</td>
            <td>Sarah Johnson</td>
            <td>Siberian Husky</td>
            <td>2024-11-23</td>
            <td>Dr. Peter Brown</td>
            <td>Pending</td>
        </tr>
    </tbody>
</table>
@endsection

@section('after_styles')
  {{-- DATA TABLES --}}
  @basset('https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.min.css')
  @basset('https://cdn.datatables.net/fixedheader/3.3.1/css/fixedHeader.dataTables.min.css')
  @basset('https://cdn.datatables.net/responsive/2.4.0/css/responsive.dataTables.min.css')

  {{-- CRUD LIST CONTENT - crud_list_styles stack --}}
  @stack('crud_list_styles')
@endsection

@section('after_scripts')
{{-- DATA TABLES SCRIPT --}}
  @basset('https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js')
  @basset('https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.min.js')
  @basset('https://cdn.datatables.net/responsive/2.4.0/js/dataTables.responsive.min.js')
  @basset('https://cdn.datatables.net/responsive/2.4.0/css/responsive.dataTables.min.css')
  @basset('https://cdn.datatables.net/fixedheader/3.3.1/js/dataTables.fixedHeader.min.js')
  @basset('https://cdn.datatables.net/fixedheader/3.3.1/css/fixedHeader.dataTables.min.css')
@endsection

@push('after_scripts')
<script>
$(document).ready(function () {
    $('#custom-datatable').DataTable();
});
</script>
@endpush

This is obviously a very simple example, but the logic of what I am trying to achieve is here. This works but doesn't look like/styled like the other lovely backpack datatables that my crudcontroller's list methods use. Ideally, I'm looking for consistency.

Am I doing this correctly by including the Datatables assets like this? Is there a better way of achieving what I am trying to do?

Answer 1

You need to configure the UI elements on data tables object $('#custom-datatable').DataTable($config).

If we don't configure it, it will add its default element that does not match the theme. For example, I replaced the default search box input with a custom input element in the following code.

@extends(backpack_view('blank'))
@section('header')
    <section class="header-operation container-fluid animated fadeIn d-flex mb-2 align-items-baseline d-print-none"
        bp-section="page-header">
        <h1 class="text-capitalize mb-0" bp-section="page-heading">custom_page1</h1>
        <p class="ms-2 ml-2 mb-0" id="datatable_info_stack" bp-section="page-subheading">custom_page1</p>
    </section>
@endsection

@section('content')
    {{-- Default box --}}
    <div class="row" bp-section="crud-operation-list">

        {{-- THE ACTUAL CONTENT --}}
        <div class="col-md-12">

            <div class="row mb-2 align-items-center">
                <div class="col-sm-9">

                </div>

                <div class="col-sm-3">
                    <div id="datatable_search_stack" class="mt-sm-0 mt-2 d-print-none">
                        <div class="input-icon">
                            <span class="input-icon-addon">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                    viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                    stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                    <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
                                    <path d="M21 21l-6 -6"></path>
                                </svg>
                            </span>
                            <input type="search" class="form-control"
                                placeholder="{{ trans('backpack::crud.search') }}..." />
                        </div>
                    </div>
                </div>

            </div>

            <div class="{{ backpack_theme_config('classes.tableWrapper') }}">
                <table id="custom-datatable"
                    class="{{ backpack_theme_config('classes.table') ?? 'table table-striped table-hover nowrap rounded card-table table-vcenter card d-table shadow-xs border-xs' }}"
                    cellspacing="0">
                    <thead>
                        <tr>
                            <th>Appointment ID</th>
                            <th>Pet Name</th>
                            <th>Owner Name</th>
                            <th>Breed</th>
                            <th>Appointment Date</th>
                            <th>Veterinarian</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>AP001</td>
                            <td>Max</td>
                            <td>John Smith</td>
                            <td>Golden Retriever</td>
                            <td>2024-11-22</td>
                            <td>Dr. Emily Green</td>
                            <td>Confirmed</td>
                        </tr>
                        <tr>
                            <td>AP002</td>
                            <td>Bella</td>
                            <td>Sarah Johnson</td>
                            <td>Siberian Husky</td>
                            <td>2024-11-23</td>
                            <td>Dr. Peter Brown</td>
                            <td>Pending</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
@endsection

@section('after_styles')
    {{-- DATA TABLES --}}
    @basset('https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.min.css')
    @basset('https://cdn.datatables.net/fixedheader/3.3.1/css/fixedHeader.dataTables.min.css')
    @basset('https://cdn.datatables.net/responsive/2.4.0/css/responsive.dataTables.min.css')

    {{-- CRUD LIST CONTENT - crud_list_styles stack --}}
    @stack('crud_list_styles')
@endsection

@section('after_scripts')
    {{-- DATA TABLES SCRIPT --}}
    @basset('https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js')
    @basset('https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.min.js')
    @basset('https://cdn.datatables.net/responsive/2.4.0/js/dataTables.responsive.min.js')
    @basset('https://cdn.datatables.net/responsive/2.4.0/css/responsive.dataTables.min.css')
    @basset('https://cdn.datatables.net/fixedheader/3.3.1/js/dataTables.fixedHeader.min.js')
    @basset('https://cdn.datatables.net/fixedheader/3.3.1/css/fixedHeader.dataTables.min.css')

    <script>
        $(document).ready(function() {
        // Initialize DataTable with custom settings
        var table = $('#custom-datatable').DataTable({
            // Disable default search box in DataTable
            dom: 'rtip', // removes the default search box, leaving table, pagination, and info
        });

        // Custom search input functionality
        $('#datatable_search_stack input').on('keyup', function() {
            table.search(this.value).draw();
        });
    });
    </script>

    {{-- CRUD LIST CONTENT - crud_list_scripts stack --}}
    @stack('crud_list_scripts')
@endsection

Answer 2

To use DataTables outside a dedicated CRUD controller, you can directly fetch the data needed for the table using AJAX calls in your JavaScript code, then initialize the DataTables instance on your HTML table, configuring the ajax option to point to the endpoint that returns your data in JSON format; essentially, you'll handle the data retrieval logic separately from your standard CRUD operations