Forum

Message de recherche en cours

Lina Boukhari avatar
Publié le 4 mars 2024
Par Lina Boukhari

Bonjour, je veux afficher un message de recherche en cours et un "spinner" de rotation lors du charge du tableau de cette blade .

1@extends('admin.layouts.app')
2<!--début -->
3<x-assets.datatables />
4 
5@push('page-css')
6 
7@endpush
8 
9@push('page-header')
10<div class="col-sm-7 col-auto">
11 <h3 class="page-title">Gestion Clients</h3>
12 <ul class="breadcrumb">
13 <li class="breadcrumb-item"><a href="{{route('dashboard')}}">Dashboard</a></li>
14 <li class="breadcrumb-item active">Clients</li>
15 </ul>
16</div>
17<div class="col-sm-5 col">
18 <a href="{{route('clients.create')}}" class="btn btn-primary float-right mt-2">Ajouter</a>
19</div>
20@endpush
21 
22@section('content')
23<div class="row">
24 <div class="col-md-12">
25 
26 
27 <div class="card">
28 <div class="card-body">
29 <div class="table-responsive">
30 <table id="client-table" class="datatable table table-hover table-center mb-0">
31 <thead>
32 <tr>
33 <th>Nom Client/Raison Sociale</th>
34 <th>Email</th>
35 <th>Mobile</th>
36 <th>Fax</th>
37 <th>Adresse</th>
38 
39 <th class="action-btn">Action</th>
40 </tr>
41 </thead>
42 <tbody>
43 
44 
45 </div>
46 <div class="clearfix"></div>
47 <footer>
48 <div class="container-fluid">
49 <p class="copyright">&copy; 2024 <a href="/" target="_blank">STIET</a>.</p>
50 </div>
51 </footer>
52</div>
53 
54@endsection
55 
56@push('page-js')
57<script>
58 $(document).ready(function() {
59 var table = $('#client-table').DataTable({
60 processing: true,
61 serverSide: true,
62 
63 ajax: "{{route('clients.index')}}",
64 columns: [
65 {data: 'name', name: 'name'},
66 {data: 'email', name: 'email'},
67 {data: 'phone', name: 'phone'},
68 {data: 'fax', name: 'fax'},
69 {data: 'address', name: 'address'},
70 {data: 'action', name: 'action', orderable: false, searchable: false},
71 ]
72 });
73 
74 });
75</script>
76@endpush
77<!--fin-->

Merci d'avance

Aucune réponse