How can I use Datatables outside of CrudControllers?
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?
Solution
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
- How can I use Datatables outside of CrudControllers?
- Laravel backpack 6 unable to load theme tabler from CDN
- Problem adding CrudTrait to existing Model
- Filtering with multiple views & Modified columns
- Images are not displayed on the site after they are sent through the database Laravel Backpack
- How to load custom data to backpack-for-laravel datatable list?
- How to add simple view other than Crud to Laravel Backpack
- Laravel backpack hide 'edit' button after trashed the record?
- Laravel-Backpack redirect to custom URL after create operation?
- Dropdown Sidebar Menu Items in Laravel Backpack
- making laravel backpack admin dashboard use regular logout link
- Where to use the dd() function to debug Laravel application?
- how to change field names in preview page (/admin/user/{id}/show)?
- Laravel Backpack File Manager - Cannot access shows Error 500
- Filter the output of a select2_from_ajax field depending on another field in crud Backpack Laravel
- CSS and JS assets not loaded at all in Laravel Backpack
- How to correctly validate checklist field in laravel backpack?
- How do you use JavaScript methods with blank custom pages
- Backpack for Laravel: Permission to see add ons
- How to add new button in Backpack laravel?
- Some attributes ignored when use subfields in a relationship
- Laravel Backpack not reflecting changes made to JS file on page refresh
- how can i load a custom view for the inline-create in backpack?
- Laravel Backpack Filters doesnt do anything after click
- Why does laravel files is in muted file name color after git clone from remote repo
- configure my PermissionCrudController to manipulate permissions in Backpack for Laravel PermissionManager
- How to Disallow User Access to CRUD Backend
- Liste pages throws error 419, page expired
- In case of directory rewrite old files are not removed in elfinder
- Laravel Backpack Error 500 Please pass setValidation() nothing, a rules array or a FormRequest class