From 946fe9b893bcf5ab5db9cbe6459b9003f58d6227 Mon Sep 17 00:00:00 2001
From: cp6 <cp6@users.noreply.github.com>
Date: Mon, 9 Dec 2024 16:45:31 +1100
Subject: [PATCH] Added Datatables to domain index for sorting and searching
 ability

---
 resources/views/domains/index.blade.php | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/resources/views/domains/index.blade.php b/resources/views/domains/index.blade.php
index f002a2e..ed37085 100644
--- a/resources/views/domains/index.blade.php
+++ b/resources/views/domains/index.blade.php
@@ -9,7 +9,7 @@
             <a href="{{ route('domains.create') }}" class="btn btn-primary mb-3">Add a domain</a>
             <x-response-alerts></x-response-alerts>
             <div class="table-responsive">
-                <table class="table table-bordered">
+                <table class="table table-bordered" id="domain-table">
                     <thead class="table-light">
                     <tr>
                         <th class="text-nowrap">Domain</th>
@@ -63,4 +63,23 @@
     <x-modal-delete-script>
         <x-slot name="uri">domains</x-slot>
     </x-modal-delete-script>
+
+    @section('scripts')
+        <script>
+            window.addEventListener('load', function () {
+                $('#domain-table').DataTable({
+                    "pageLength": 15,
+                    "lengthMenu": [5, 10, 15, 25, 30, 50, 75, 100],
+                    "columnDefs": [
+                        {"orderable": false, "targets": [5]}
+                    ],
+                    "initComplete": function () {
+                        $('.dataTables_length,.dataTables_filter').addClass('mb-2');
+                        $('.dataTables_paginate').addClass('mt-2');
+                        $('.dataTables_info').addClass('mt-2 text-muted ');
+                    }
+                });
+            })
+        </script>
+    @endsection
 </x-app-layout>