Patch Update

customers list tables replaced with DataTables

system/controllers/customers.php

@@ -512,19 +512,11 @@ switch ($action) {
         break;
 
     default:
-        $search = _post('search');
         run_hook('list_customers'); #HOOK
-        if ($search != '') {
-            $query = ORM::for_table('tbl_customers')
-            ->where_raw("(`username` LIKE '%$search%' OR `fullname` LIKE '%$search%' OR `phonenumber` LIKE '%$search%' OR `email` LIKE '%$search%')")
-            ->order_by_asc('username');
-            $d = Paginator::findMany($query, ['search' => $search]);
-        } else {
-            $query = ORM::for_table('tbl_customers')->order_by_asc('username');
-            $d = Paginator::findMany($query);
-        }
 
-        $ui->assign('search', htmlspecialchars($search));
+        $query = ORM::for_table('tbl_customers')->order_by_asc('username');
+        $d = $query->findMany();
+        $ui->assign('xheader', '<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">');
         $ui->assign('d', $d);
         $ui->display('customers.tpl');
         break;

ui/ui/customers.tpl

@@ -1,4 +1,15 @@
 {include file="sections/header.tpl"}
+<style>
+    .dataTables_wrapper .dataTables_paginate .paginate_button {
+        display: inline-block;
+        padding: 5px 10px;
+        margin-right: 5px;
+        border: 1px solid #ccc;
+        background-color: #fff;
+        color: #333;
+        cursor: pointer;
+    }
+</style>
 
 <div class="row">
     <div class="col-sm-12">
@@ -16,16 +27,7 @@
             <div class="panel-body">
                 <div class="md-whiteframe-z1 mb20 text-center" style="padding: 15px">
                     <div class="col-md-8">
-                        <form id="site-search" method="post" action="{$_url}customers/">
+
-                            <div class="input-group">
-                                <input type="text" id="search-input" name="search" value="{$search}"
-                                    class="form-control" placeholder="{Lang::T('Search')}...">
-                                <div class="input-group-btn">
-                                    <button class="btn btn-success" type="submit"><span
-                                            class="fa fa-search"></span></button>
-                                </div>
-                            </div>
-                        </form>
                     </div>
                     <div class="col-md-4">
                         <a href="{$_url}customers/add" class="btn btn-primary btn-block"><i class="ion ion-android-add">
@@ -33,14 +35,14 @@
                     </div>&nbsp;
                 </div>
                 <div class="table-responsive table_mobile">
-                    <table class="table table-bordered table-striped table-condensed">
+                    <table id="customerTable" class="table table-bordered table-striped table-condensed">
                         <thead>
                             <tr>
                                 <th>{Lang::T('Username')}</th>
                                 <th>{Lang::T('Account Type')}</th>
                                 <th>{Lang::T('Full Name')}</th>
                                 <th>{Lang::T('Balance')}</th>
-                                <th width="120px"></th>
+                                <th>{Lang::T('Contact')}</th>
                                 <th>{Lang::T('Package')}</th>
                                 <th>{Lang::T('Service Type')}</th>
                                 <th>{Lang::T('Created On')}</th>
@@ -66,8 +68,9 @@
                                         title="{$ds['email']}"><i class="glyphicon glyphicon-envelope"></i></a>
                                     {/if}
                                     {if $ds['coordinates']}
-                                            <a href="https://www.google.com/maps/dir//{$ds['coordinates']}/" target="_blank" class="btn btn-default btn-xs"
+                                    <a href="https://www.google.com/maps/dir//{$ds['coordinates']}/" target="_blank"
-                                                title="{$ds['coordinates']}"><i class="glyphicon glyphicon-map-marker"></i></a>
+                                        class="btn btn-default btn-xs" title="{$ds['coordinates']}"><i
+                                            class="glyphicon glyphicon-map-marker"></i></a>
                                     {/if}
                                 </td>
                                 <td align="center" api-get-text="{$_url}autoload/customer_is_active/{$ds['id']}">
@@ -90,30 +93,20 @@
                         </tbody>
                     </table>
                 </div>
-                {include file="pagination.tpl"}
             </div>
         </div>
     </div>
 </div>
 
+
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
 <script>
-    // Functionality to filter table rows based on admin input
+    var $j = jQuery.noConflict();
-    document.addEventListener('DOMContentLoaded', function() {
-        var searchInput = document.getElementById('search-input');
-        var tableRows = document.querySelectorAll('tbody tr');
 
-        searchInput.addEventListener('input', function() {
+    $j(document).ready(function () {
-            var searchText = this.value.toLowerCase();
+        $j('#customerTable').DataTable({
-
+            "pagingType": "full_numbers"
-            tableRows.forEach(function(row) {
-                var rowData = row.textContent.toLowerCase();
-
-                if (rowData.includes(searchText)) {
-                    row.style.display = '';
-                } else {
-                    row.style.display = 'none';
-                }
-            });
         });
     });
 </script>