En el archivo donde tiene el formulario agregar y definir lo siguiente:
en el form definir un id="form-pagination" y el onsubmit="return false;" para que no se recargue la pagina, ademas agregar dos div donde se insertara la tabla de resultados y otro div donde se agregara la paginación .
<div id="wrapper">
<div class="container">
<div id="news-header" class="bootgrid-header container-fluid">
<div class="row">
<div class="col-sm-12 actionBar">
<div class="search-bar">
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="What are you looking for?">
</div>
<div class="actions btn-group">
<?php
$select_quantity = '';
if (isset($_POST['amount_show'])) :
$select_quantity = $_POST['amount_show'];
endif;
?>
<form method="post" id="form-pagination" onsubmit="return false;">
<input name="page" id="page" type="hidden" value=1>
<select id="amount_show" name="amount_show" >
<option value="10" <?php if ($select_quantity==10) echo "selected"; ?>>10</option>
<option value="25" <?php if ($select_quantity==25) echo "selected"; ?>>25</option>
<option value="50" <?php if ($select_quantity==50) echo "selected"; ?>>50</option>
<option value="100" <?php if ($select_quantity==100) echo "selected"; ?>>100</option>
</select>
</form>
</div>
</div>
</div>
</div>
<div id="contenido_table" class="col-sm-12">
</div>
<div id="pagination" class="col-sm-12">
</div>
</div>
</div>
En el archivo ajax.php puedes devolver dos partes el contenido de la tabla y la paginación, en los elementos que se encuentran dentro de los botones de la paginación se definirá el atributo page="". y se regresara la paginación y la tabla de resultados
header('Content-Type: application/json');
$html_table="";
if (isset($_GET['page'])) :
$page = $_GET['page'] ?: '';
else :
$page = 1;
endif;
if (isset($_POST['amount_show'])) :
$records_by_page = $_POST['amount_show'];
else :
$records_by_page = 10;
endif;
$localization_sql = ($page-1) * $records_by_page;
$sql = "SELECT id,name,email
FROM users
ORDER BY id DESC LIMIT $localization_sql, $records_by_page";
$stmt = $con->prepare($sql);
$stmt->execute();
$stmt->store_result();
if ($stmt->num_rows>0) :
$html_table.='<table id="myTable" class="table table-condensed table-hover table-striped bootgrid-table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>';
$stmt->bind_result($id,$name,$email);
while ($stmt->fetch()) :
$html_table.='<tr>
<td>'.$id.'</td>
<td>'.$name.'</td>
<td>'.$email.'</td>
<td>Edit</td>
</tr>';
endwhile;
$html_table.='</tbody>';
$html_table.='</table>';
$stmt->close();
/**
*
* Botones ATRAS / SIGUIENTES
*
*/
$html_pagination="";
$sql = "SELECT * FROM users";
$stmt = $con->prepare($sql);
$stmt->execute();
$stmt->store_result();
$BD_records = $stmt->num_rows;
$stmt->close();
$con->close();
$total_page = ceil($BD_records / $records_by_page);
$prev = $page - 1;
$next = $page + 1;
$html_pagination.='<div class=pagination>
<ul class="pagination">';
if ($prev > 0) :
$html_pagination.="<li><a page='1'><i class='icon-angle-double-arrow'></i></a></li>";
$html_pagination.="<li><a page='$prev'><i class='icon-angle-left'></i></a></li>";
endif;
for ($i=1; $i<=$total_page; $i++) :
if ($page==$i) :
$html_pagination.= "<li><a class=active>". $page . "</a></li>";
else :
$html_pagination.= "<li ><a page='$i'>$i</a></li>";
endif;
endfor;
if ($page < $total_page ) :
$html_pagination.= "<li ><a page='$next' href=''><i class='icon-angle-right'></i></a></li>";
$html_pagination.="<li ><a page='$total_page' href=''><i class='icon-angle-double-right'></i></a></li>";
endif;
$html_pagination.='</ul></div>';
else :
$stmt->close();
endif;
$data=array();
$data["html_table"]=$html_table;
$data["html_pagination"]=$html_pagination;
echo json_encode($data, JSON_PRETTY_PRINT);
en tu script.js agregaras las funciones
//se ejecuta el submit del formulario form-pagination al inicio
$(document).ready(function() {
enviarFormulario();
});
//evento para que se ejecute al dar click sobre los botones de pagination
$(document).on('click', '.pagination li a', function(e){
var page=parseInt($(this).data("page"));
if(!isNaN(page)){
$("#form-pagination #page").val(page);
enviarFormulario();
}
e.preventDefault();
});
//evento para que se ejecute al cambiar el valor de amount_show
$(document).on('change', '#amount_show', function(event){
$("#form-pagination #page").val(1);
enviarFormulario();
});
//funcion para que se ejecute al realizar el submit en el formulario form-pagination
function enviarFormulario(){
$.ajax({
type: "GET",
data: $("#form-pagination").serialize(),
url: "ajax.php",
dataType: "json",
success: function(data) {
$("#contenido_table").html(data.html_table);
$("#pagination").html(data.html_pagination);
}
});
}