moved products away from datatables to server side listing

products.php

@@ -1,22 +1,75 @@
-<?php include("header.php"); ?>
+<?php include("header.php");
 
-<?php $sql = mysqli_query($mysqli,"SELECT * FROM products ORDER BY product_name ASC"); ?>
+  //Rebuild URL
+
+  $url_query_strings_sb = http_build_query(array_merge($_GET,array('sb' => $sb, 'o' => $o)));
+
+  if(isset($_GET['p'])){
+    $p = intval($_GET['p']);
+    $record_from = (($p)-1)*10;
+    $record_to =  10;
+  }else{
+    $record_from = 0;
+    $record_to = 10;
+    $p = 1;
+  }
+    
+  if(isset($_GET['q'])){
+    $q = $_GET['q'];
+  }else{
+    $q = "";
+  }
+
+  if(!empty($_GET['sb'])){
+    $sb = $_GET['sb'];
+  }else{
+    $sb = "product_name";
+  }
+
+  if(isset($_GET['o'])){
+    if($_GET['o'] == 'ASC'){
+      $o = "ASC";
+      $disp = "DESC";
+    }else{
+      $o = "DESC";
+      $disp = "ASC";
+    }
+  }else{
+    $o = "DESC";
+    $disp = "ASC";
+  }
+
+  $sql = mysqli_query($mysqli,"SELECT SQL_CALC_FOUND_ROWS * FROM products WHERE product_name LIKE '%$q%' ORDER BY $sb $o LIMIT $record_from, $record_to");
+
+  $num_rows = mysqli_fetch_row(mysqli_query($mysqli,"SELECT FOUND_ROWS()"));
+  $total_found_rows = $num_rows[0];
+  $total_pages = ceil($total_found_rows / 10);
+
+?>
 
 
 <div class="card mb-3">
-  <div class="card-header">
+  <div class="card-header bg-dark text-white">
     <h6 class="float-left mt-2"><i class="fa fa-fw fa-box mr-2"></i>Products</h6>
     <button type="button" class="btn btn-primary btn-sm float-right" data-toggle="modal" data-target="#addProductModal"><i class="fas fa-fw fa-plus"></i></button>
   </div>
   <div class="card-body">
+    <form autocomplete="off">
+      <div class="input-group">
+        <input type="search" class="form-control col-md-4" name="q" value="<?php if(isset($q)){echo $q;} ?>" placeholder="Search Products">
+        <div class="input-group-append">
+          <button class="btn btn-primary"><i class="fa fa-search"></i></button>
+        </div>
+      </div>
+    </form>
     <div class="table-responsive">
-      <table class="table table-striped table-borderless table-hover" id="dataTable" width="100%" cellspacing="0">
+      <table class="table table-striped table-borderless table-hover">
-        <thead class="thead-dark">
+        <thead class="text-dark">
           <tr>
-            <th>Name</th>
+            <th><a class="text-dark" href="?<?php echo $url_query_strings_sb; ?>&sb=product_name&o=<?php echo $disp; ?>">Name</a></th>
             <th>Description</th>
-            <th class="text-right">Cost</th>
+            <th class="text-right"><a class="text-dark" href="?<?php echo $url_query_strings_sb; ?>&sb=product_cost&o=<?php echo $disp; ?>">Cost</a></th>
-            <th class="text-center">Actions</th>
+            <th class="text-center">Action</th>
           </tr>
         </thead>
         <tbody>
@@ -55,6 +108,9 @@
 
         </tbody>
       </table>
+
+      <?php include("pagination.php"); ?>
+
     </div>
   </div>
 </div>