<div id="load_data">

  </div>

 $(document).ready(function(){

      load_data();

      function load_data(page){

        $('#load_data').html('<div id="status" style="" ></div>');
        var action = 'pagination2';
        $.ajax({
                url:"pagination2.php?="+page,
                method:"GET",
                error: function(xhr, text){
                alert("Whoops! The request for new content failed");
                     },
                data:{page:page},
                success:function(data){
                     $('#load_data').html(data);
                     $('.pagination_link').html(data.pagination_link);
                },
           })
      }

      $(document).on('click', '.pagination_link', function(event) // this line binds the handler to your pagination
        {
           event.preventDefault(); //this prevents the link being loaded as a new page, the default behaviour
           var page = $(this).attr("id"); //we get the url of the page to load in by ajax
           load_data(page);
           //history.pushState(null, null, $(this).attr('id'));
           //historyedited = true;
      });
 });
 </script>

<?php require_once('../private/initialize.php'); ?>

<?php
$page = '';

$rowperpage = 10;

$page = $_GET['page'] ?? 1;

//$page = !empty($_GET['page']) ? (int)$_GET['page'] : '1';

$page = $page - 1;

$p = $page * $rowperpage;

?>

<?php
 $visible = $visible ?? true;

$id = isset($_GET['id']) ? $_GET['id'] : '1';

$products_count = count_all_products(['visible' => $visible]);

$sql = "SELECT * FROM products ";
$sql .= "WHERE visible = true ";
$sql .= "ORDER BY position ASC ";
$sql .= "LIMIT ".$p.", ".$rowperpage."";

$product_set = find_by_sql($sql);

$product_count = mysqli_num_rows($product_set);

if($product_count == 0) {
      echo "<h1>no products</h1>";
      }

while($run_product_set = mysqli_fetch_assoc($product_set)) { ?>

    <div style="float: left; margin-left: 20px; margin-top: 10px; class="small">

      <a href="<?php echo url_for('/show.php?id=' . h(u($run_product_set['id'])));   ?>">
          <img src="staff/images/<?php echo h($run_product_set['filename']); ?> " width="150">
        </a>

      <p><?php echo h($run_product_set['prod_name']); ?></p>

    </div>

    <?php }

        mysqli_free_result($product_set);

?>
<section class="pagination">

<?php

$url = url_for('index_all.php');

$page_nb = isset($_GET['page']) ? $_GET['page'] : '1';
$check = $p + $rowperpage;
$prev_page = $page_nb - 1;

$limit = $products_count / $rowperpage;
    //echo $limit;
    //exit;
$limit = ceil($limit);
$current_page = $page_nb;

if($page_nb > 1) {
    //echo "<a href='index_all.php?page=".$prev_page."'>Back</a>";
    echo "<span class='pagination_link' style='cursor:pointer;'  id='".$prev_page."'>Back</span>";

}

if ( $products_count > $check ) {

    for ( $i = max( 1, $page_nb - 5 ); $i <= min( $page_nb + 5, $limit ); $i++ ) {
        if ( $current_page == $i ) {
            echo "<span class="selected">{$i}</span>";
        } else {
            //echo "<a href="{$url}?page=" . $i . "">{$i}</a>";
            //echo "<span class='pagination_link' style='cursor:pointer;' id='".$i."' onclick='window.history.go(1); return false;'>".$i."</span>";
            echo "<span class='pagination_link' style='cursor:pointer;' id='".$i."'>".$i."</span>";
        }
      }
    }



if ($products_count > $check) {

$next_page = $page_nb + 1;
    //echo "<a href='index_all.php?page=".$next_page."'>Next</a>";
    echo "<span class='pagination_link' style='cursor:pointer;' id='".$next_page."'>Next</span>";

}






?>

   </section>