datatable.blade.php 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. {{-- Table --}}
  2. <div class="table-responsive">
  3. <table id="{{ $id }}" style="width:100%" {{ $attributes->merge(['class' => $makeTableClass()]) }}>
  4. {{-- Table head --}}
  5. <thead @isset($headTheme) class="thead-{{ $headTheme }}" @endisset>
  6. <tr>
  7. @foreach($heads as $th)
  8. <th @isset($th['classes']) class="{{ $th['classes'] }}" @endisset
  9. @isset($th['width']) style="width:{{ $th['width'] }}%" @endisset
  10. @isset($th['no-export']) dt-no-export @endisset>
  11. {{ is_array($th) ? ($th['label'] ?? '') : $th }}
  12. </th>
  13. @endforeach
  14. </tr>
  15. </thead>
  16. {{-- Table body --}}
  17. <tbody>{{ $slot }}</tbody>
  18. {{-- Table footer --}}
  19. @isset($withFooter)
  20. <tfoot @isset($footerTheme) class="thead-{{ $footerTheme }}" @endisset>
  21. <tr>
  22. @foreach($heads as $th)
  23. <th>{{ is_array($th) ? ($th['label'] ?? '') : $th }}</th>
  24. @endforeach
  25. </tr>
  26. </tfoot>
  27. @endisset
  28. </table>
  29. </div>
  30. {{-- Add plugin initialization and configuration code --}}
  31. @push('js')
  32. <script>
  33. $(() => {
  34. $('#{{ $id }}').DataTable( @json($config) );
  35. })
  36. </script>
  37. @endpush
  38. {{-- Add CSS styling for beautify option --}}
  39. @isset($beautify)
  40. @push('css')
  41. <style type="text/css">
  42. #{{ $id }} tr td, #{{ $id }} tr th {
  43. vertical-align: middle;
  44. text-align: center;
  45. }
  46. </style>
  47. @endpush
  48. @endisset
  49. {{-- Improve CSS styling when using responsive extension --}}
  50. @if(! empty($config['responsive']))
  51. @once
  52. @push('css')
  53. <style type="text/css">
  54. .dataTable .child .dtr-details {
  55. width: 100%;
  56. }
  57. .dataTable .child .dtr-data {
  58. float: right;
  59. }
  60. </style>
  61. @endpush
  62. @endonce
  63. @endif