Bonjour,

J'ai un problème de performance sur mon site, je charge de très grosses données de ma base de données sur ma page. Il me charge le contenu de toute ma table. J'aimerais faire un champ qui permettrait de trier les données. Ce champ serait un intervalle de date avec le calendrier comme on voit souvent sur les sites courants.

Je ne veux pas qu'il charge les données de la base tant que l'utilisateur n'a pas demandé d'intervalle.

J'ai donc pensé à l'Ajax qui pourrait envoyer la bonne requête à ma base et actualiser mon site de manière dynamique. Mais malheureusement après plusieurs recherche Google sur le sujet, je ne trouve pas de solutions.

Voici un petit aperçu de la structure de ma base :

Je vois une algo comme ça :

- Recup paramètre borneinf et bornesup

- Requete SQL -> SELECT * FROM editeur WHERE date BETWEEN borneinf AND bornesup

- Recup et affichage

Mais je ne sais pas comment écrire ça en Ajax

Pouvez-vous m'aider ?

EDIT:

J'ai tenté de faire un truc mais malheureusement ça ne marche pas. Voici mon code :

Html :

<div id="aff">

</div>

JavaScript:

$(document).ready(function(){
 
    $("#trier").click(function(e){
        e.preventDefault();
 
        $.post(
            '/tabl.php', // Un script PHP que l'on va créer juste après
            {
                borneinf : $("#borneinf").val(),  // Nous récupérons la valeur de nos input que l'on fait passer à tabl.php
                bornesup : $("#bornesup").val(),
                nom : $("#nom").val()
            },

            function(data){
 
                if(data == 'Success'){
                     console.log('success');
                      
                     var taille = data["tabtext"].length;
                     var i=0;
                     while ( i < taille){
                              console.log(data['tabdate'][i])
                              console.log(data['tabuser'][i])
                              console.log(data['tabtext'][i])
                            	$("#aff").html("<tr>");
                              $("#aff").html("<td >Date :" + data["tabdate"][i] + "<br>Créé par: " + data["tabuser"][i] + "<br> <br>" + data["tabtext"][i] + "</td>");
                            	$("#aff").html("</tr>");
                              i++;
                     
                     }
                }
                else{
                     // Le membre n'a pas été connecté. (data vaut ici "failed")
                     console.log('Failed');
                    
                     
                     var taille = data["tabtext"].length;
                     var i=0;
                     while ( i < taille){
                              console.log(data['tabdate'][i])
                              console.log(data['tabuser'][i])
                              console.log(data['tabtext'][i])
                            	$("#aff").html("<tr>");
                              $("#aff").html("<td >Date :" + data["tabdate"][i] + "<br>Créé par: " + data["tabuser"][i] + "<br> <br>" + data["tabtext"][i] + "</td>");
                            	$("#aff").html("</tr>");
                              i++;
                     
                     }
                }
         
            },
            'json'
         );
    });
});

PHP:

$req=$PDO->query("SELECT date,text,utilisateur FROM editeur WHERE date BETWEEN '".$_POST['borneinf']."' AND '".$_POST['bornesup']."' AND activite='XXXXXX_019' ;");


$tabtext= array();
$tabuser= array();
$tabdate= array();

$tabtotal= [];
$i=0;
while($data = $req->fetch()){
  $tabtext[$i] = $data['text'];
  $tabuser[$i] = $data['utilisateur'];
  $tabdate[$i] = $data['date'];
  $i++;
}

$tabtotal['tabdate']=$tabdate;
$tabtotal['tabuser']=$tabuser;
$tabtotal['tabtext']=$tabtext;


header('Content-Type: application/json');
echo json_encode($tabtotal);

Bizarrement il passe dans le Failed et non dans le success alors que quand je met le meme code dans le else avec un console.log('Failed'), je vois un failed dans la console. les données sont bien dans mon tableau car je les voient dans la console. 

Il ne m'affiche rien (il ne remplace pas la balise div avec l'id "aff".

-
Edité par dikdableu 14 juin 2018 à 15:45:15

J'ai réussi à coder ce qu'il m'intéresse mais il me manque quelque chose. Je met le résultat de la requête dans un tableau mais du coup le tableau n'applique pas les paramètre que je lui défini précédemment. Meme si je fais un table.ajax.reload()

voici mon code : 

Html:

<div class="row">
        <div class="col-lg-12">
          <div class="card mb-3">
            <div class="card-header">
              
              <form>
              
                <p>De: </p>
                <input type="date" id="borneinf"> 
                <p>A: </p>
                <input type="date" id="bornesup">
                <input type="hidden" id="nom" value=<?php echo $nomfichier?>>
                <input type="submit" id="trier" value="OK">
                
              </form>
              </div>
              
      
               <table class="table table-bordered" width="100%" id="dataTable3" cellspacing="0">
           
    							<tr>
    								<th>Comptes-Rendu  </th>
    							</tr>
						
                  <tr id="test0">
                    <td>
                    </td>
                  </tr>      
       
              </table>
              
              
			    	</div>
              
        </div>
              
      </div>

PHP :

$req=$PDO->query("SELECT date,text,utilisateur FROM editeur WHERE date BETWEEN '".$_POST['borneinf']."' AND '".$_POST['bornesup']."' AND activite='XXXX_019' ;");


$tabtext= array();
$tabuser= array();
$tabdate= array();

$tabtotal= [];
$i=0;
while($data = $req->fetch()){
  $tabtext[$i] = $data['text'];
  $tabuser[$i] = $data['utilisateur'];
  $tabdate[$i] = $data['date'];
  $i++;
}

$tabtotal['tabdate']=$tabdate;
$tabtotal['tabuser']=$tabuser;
$tabtotal['tabtext']=$tabtext;


header('Content-Type: application/json');
echo json_encode($tabtotal);

JS:

<script>
$('#dataTable3').DataTable({
   
			"lengthMenu":[[1, 5, 10, 25, 50, -1], [1, 5 ,10, 25, 50 , "All"]]
      
		});
   
</script>

<script>
 
$(document).ready(function(){
 
    $("#trier").click(function(e){
        e.preventDefault();
 
        $.post(
            '/tabl.php', // Un script PHP que l'on va créer juste après
            {
                borneinf : $("#borneinf").val(),  // Nous récupérons la valeur de nos input que l'on fait passer à tabl.php
                bornesup : $("#bornesup").val(),
                nom : $("#nom").val()
            },

            function(data){

                     var taille = data["tabtext"].length;
                     var i=0;
                     var j=1;                
                     while ( i < taille){
                     
                     $("#test"+i).replaceWith("<tr><td >Date :" + data['tabdate'][i] + "<br>Créé par: " + data['tabuser'][i] + "<br> <br>" + data['tabtext'][i] + "</td></tr><tr id='test"+j+"'><td></td>></tr>");
                     j++;        
                     i++;
                     
                     }
                
         
            },
            'json'
         );
    });
   
    $("#dataTable3").DataTable().ajax.reload();
  
});
 


 
</script>

Pouvez vous m'aider ?

EDIT: 

J'ai un autre problème, avec ce code quand je fais une nouvelle recherche il ajoute le résultat au précédent alors que je voudrais qu'il le remplace. Mais avec ce code je vois bien que c'est impossible 

-
Edité par dikdableu 15 juin 2018 à 14:44:06