Come impaginare i risultati di una query mysql con ajax e jquery

Utilizzando un sistema di impaginazione integrando il framework Jquery e ajax con il Php, sarai in grado di visualizzare i risultati senza il fastidioso refresh della pagina prodotto ad ogni clic.

Come per tutte le pagine dinamiche, devi innanzi tutto creare la connessione al tuo database dove avrai preventivamente popolato le tabelle con i dati da mostrare:

    $tuoServer = "localhost";
	$username    = "root";
	$password   = "123456";
	$nomeDatabase= "nomeDatabase";

	$con = mysqli_connect($tuoServer, $username,$password,$nomeDatabase);

	if ($con->connect_error) {
		die("Connection failed". $con->connect_error);
	}

Subito dopo avrai creato la tua pagina html richiamando le librerie ajax e bootstrap per l'impaginazione

  <link rel="stylesheet" href="bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="jumbotron text-center">
  <h1>Come impaginare i risultati di una query Mysql</h1>
</div>
  
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div id="risultato">
        
      </div>
    </div>
  </div>
</div>

Seguito poi dal tuo script Jquery e Ajax per la gestione delle chiamate asincrone dei risultati.

$(document).ready(function(){
    function loadData(pagina){
      $.ajax({
        url  : "paginaQuery.php",
        type : "POST",
        cache: false,
        data : {pagina_nr:pagina},
        success:function(response){
          $("#risultati").html(response);
        }
      });
    }
    loadData();
    
    
    $(document).on("click", ".pagination li a", function(e){
      e.preventDefault();
      var paginaId = $(this).attr("id");
      loadData(paginaId);
    });
  });

Adesso devi impostare la tua pagina di interrogazione dati in php:

 <?php

	require_once('dbConfig.php');// la tua connessione al db

	$limit = 5; //limite dei risultyati per pagine che puoi eventualente aumentare

	if (isset($_POST['pagina_nr'])) {
	    $pagina_nr = $_POST['pagina_nr'];
	}else{
	    $pagina_nr = 1;
	}

	$offset = ($pagina_nr-1) * $limit;

	$query = "SELECT * FROM listaColori LIMIT $offset, $limit";

	$result = mysqli_query($con, $query);

	$output = "";

	if (mysqli_num_rows($result) > 0) {

	$output.="<table class='table'>
		    <thead>
		        <tr>
		        <th>#id</th>
    	       <th>RGB</th>
			   <th>HEX</th>
			   <th>Colore</th>
			   
	           </tr>
		    </thead>
	         <tbody>";
	while ($row = mysqli_fetch_assoc($result)) {

	$output.="<tr>
	            <td>{$row['id']}</td>
	            <td>{$row['rgb']}</td>
	            <td>{$row['hex']}</td>
	            <td>{$row['italian']}</td>
	            
		 </tr>";
	} 
	$output.="</tbody>
		</table>";

	$sql = "SELECT * FROM listaColori";

	$records = mysqli_query($con, $sql);

	$totalRecords = mysqli_num_rows($records);

	$totalPage = ceil($totalRecords/$limit);

	$output.="<ul class='pagination justify-content-center' style='margin:20px 0'>";

	for ($i=1; $i <= $totalPage ; $i++) { 
	   if ($i == $pagina_nr) {
		$active = "active";
	   }else{
		$active = "";
	   }

	    $output.="<li class='page-item $active'><a class='page-link' id='$i' href=''>$i</a></li>";
	}

	$output .= "</ul>";

	echo $output;

	}

?>

Questo è il sistema semplice per la gestione dei risultati, ovviamente lo script si presta a ulteriori modifiche e migliorie o ad esempio facendo passare una variable in GET  da un campo form di ricerca, ad esempio:

$query = "SELECT * FROM listaColori LIMIT $offset, $limit WHERE colore = '$GET['q']'";
/// ma è meglio utilizzare le query preparate in PDO per questo sistema

 

Prova anche tu!

 

---