Discussion :

[grinder59]

Bonjour,

Petite question toute bête. Je fais un appel ajax de base et je veux traiter le retour :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
	$( document ).ready(function() {
	    $.ajax({
                url : 'mon_url', 
                method : 'POST',
                dataType : 'json',
            })
            .done(function(retour) {
			$.each(retour, function(i, item) {
				str = '<tr><td>'+item.col1+'</td><td>'+item.col2+'</td></tr>';
				$('#dataTab').append(str);
			})
	    })
	})

Le problème est que j'ai une très grande quantité de données qui sont renvoyées par le serveur (23 000 lignes / 6 Mo).
Alors oui, je sais il faut absolument que je fasse de la pagination et c'est prévu. Mais du coup, je me posais une question : Y a-t-il une limite de taille pour les données retournées lors de requêtes ajax ?

Merci de votre aide !

[Toufik83]

Salut,

Y a-t-il une limite de taille pour les données retournées lors de requêtes ajax

Tout dépend de la configuration serveur, et plus précisément la variable post_max_size qui vaut à 8M (8 méga) par défaut dans php.ini.

De toute façon tu n'as rien à craindre si tu utilises le plugin DataTable (vu que tu veux gérer une <table>).

[grinder59]

Merci de ton retour.

Au final, il a fallu que je passe mon script en POST et que je le corrige mais cela fonctionne.
L'idée était justement de faire un comparatif avec Datatables sur le temps de chargement de mon jeu de 23000 données qui fait 6Mo.
La où avec Datatables ça prend près d'une minute pour afficher un tableau, mon dev (certes, sans les fonctionnalités de filtrage et de tri) prend 10 secondes...
Du coup Datatables, je ne suis pas sûr de le garder.

[Toufik83]

La où avec Datatables ça prend près d'une minute pour afficher un tableau

Sérieux ? parce que j'ai géré une base de donnée qui contient plus que 300 milles enregistrements sans problème.

as-tu un exemple en ligne qui montre cette lenteur d'affichage ?

[grinder59]

Malheureusement non, ce n'est que sur de l'intranet.
Mais ta réflexion me pousse à penser qu'il y a peut être un souci dans notre configuration de Datatables.
Notre première erreur est d'afficher toutes les données.
Une pagination permettra peut être de résoudre notre problème de lenteur de façon définitive

[Toufik83]

Notre première erreur est d'afficher toutes les données.
Une pagination permettra peut être de résoudre notre problème de lenteur de façon définitive

Justement, DataTable est conçu pour ne récupérer que les données qui doivent être affichées, puis il pagine la table selon le nombre de page.

[Invité]

Justement, DataTable est conçu pour ne récupérer que les données qui doivent être affichées....

@Toufik83
Tu fais une erreur.

DataTable ne "récupère" rien du tout. Il traite les données qu'on lui transmet.
On récupère TOUTES les lignes (via Ajax, ou pas).
Puis, DataTable n'affiche que celles de la page en cours, via son système de pagination dynamique.

Contrairement à une pagination PHP, où on ne récupère effectivement QUE les lignes à afficher (via Ajax aussi, ou pas).

Donc, DataTable n'est pas une bonne solution si le nombre de lignes est (très/trop) important.


[correction] Voir messages suivants...

[Toufik83]

DataTable récupère TOUTES les lignes.

Non, tu te trompes, il ne récupère (avec le code qu'on à mis bien sur) pas toutes les lignes de la base mais plutôt le nombre de lignes puis l'affichage est effectué selon $_REQUEST["start"] et $_REQUEST["length"]

La lenteur d'affichage est au niveau client et pas serveur, c'est la boucle qui construit l'html qui prend beaucoup de temps pour générer les balises html.

Je confirme qu'avec DataTable je n'avais aucun problème d'affichage, que se soit avec un nombre d'enregistrement élevé ou pas.

[Invité]

Tu confonds "afficher" (à l'écran) et "traiter", non ?

Je confirme qu'avec DataTable je n'avais aucun problème d'affichage, que se soit avec un nombre d'enregistrement élevé ou pas.

Parce que ce n'est PAS Datatable qui est en cause *, mais la quantité de données à récupérer via Ajax !
* Datatable se contente de "mettre en page" les données qu'on lui donne !

[correction] Voir messages suivants...

...j'ai une très grande quantité de données qui sont renvoyées par le serveur (23 000 lignes / 6 Mo)...

@grinder59
La vraie question est là : comment arrives-tu à avoir 6 Mo de données (pour "seulement" 25000 lignes) ???

• Des images ou des fichiers sont enregistrées dans des colonnes BLOB ??

[Toufik83]

On récupère TOUTES les lignes (via Ajax, ou pas).
Puis, DataTable n'affiche que celles de la page en cours, via son système de pagination dynamique.

La plupart des développeurs ne savent pas comment utiliser proprement ce plugin, parce que d'après la doc (qu'elle manque trop d'exemples...) ils disent bien que c'est Idéal pour les grands ensembles de données.

Peut être que je me suis mal exprimé au début de la discussion, mais j'essaie seulement de t'expliquer mon point de vue.

Supposons par exemple qu'on a 1 million de lignes dans une table mysql et qu'on veut afficher 10 enregistrements par page, dans ce cas on doit écrire un script php (ou autre) qui :

• Compte seulement le nombre de lignes avec une requête count(nom_champ) (sans prendre on considération les critères de recherche ) et le stocker dans la variable recordsTotal.
  
  
• Compte le nombre de lignes (avec ou sans les critères de recherche) et le stocker dans recordsFiltred.
  
  
• Détermine les lignes à retourner tout en utilisant $_REQUEST["start"] et $_REQUEST["length"] ( une requête avec LIMIT $start.", ".$offset est nécessaire ) et les stocker dans un tableau pour le passer à l'index data.
  

Au chargement de la page la variable $_REQUEST["page"]=1 et $_REQUEST["length"] est défini par l'option pageLength du plugin et il va falloir gérer ça dynamiquement pour déterminer quelle partie à sélectionner :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
$req="select count(*) from table";
...
$recordsTotal=$stmt->fetchColumn();//récupérer le nombre totale des lignes qui vaut à 1 million (ceci doit être le nombre totale des lignes sans prendre en considération les critères de recherche)
 
/* on doit aussi compter le nombre de lignes correspondantes aux critères de recherches ( s'ils existent, sinon $recordsFiltred vaut $recordsTotal )*/
$r="select count(*) from table where (critère de recherche)";
...
$recordsFiltred=$stmt->fetchColumn();//on stocke seulement le nombre;
 
/* début de la partie */
$start=($_REQUEST["page"]-1)*$_REQUEST["length"];
 
/* Fin de la partie */
$offset=$_REQUEST["length"];
 
/* On sélectionne la partie correspondante */
 
$r="select .... (where avec critères de recherche ou pas )  limit ".$start.",".$offset;  
/* soit 0,10 pour la page 1 ou "10,10" pour la page 2 ou "20,10" pour la page 3 ...et dans ce cas on ne récupère que la bonne partie à afficher et pas toutes les lignes de la table.*/
 
$dataFiltred=$stmt->fetchAll();// on ne récupère que 10 lignes ici !
 
/* après il ne reste plus qu'à renvoyer ces 10 lignes + les variables nécessaires de DataTable*/
 
$retour=["data"=>$dataFiltred,"recordsFiltred"=>$recordsFiltred,"recordsTotal"=>$recordsTotal,"draw"=$_REQUEST['draw']];
 
echo json_encode($retour);

Le système de pagination interne de DataTable récupère les valeurs nécessaires pour générer les boutons de pagination selon le recordsFiltred, et dans notre cas on aura Math.ceil(recordsFiltred/pageLength) ce qui donne le nombre de page à générer, mais le plugin ne génère que les boutons voisins de la page en cours.

Voici un autre exemple qui simule la gestion de 5 millions lignes en utilisant scroller. mais personnellement je préfère la pagination que le scroller.

Qu'en penses-tu ? es-tu d'accord avec moi, non... ?

[Invité]

Bonjour Toufik83,

La plupart des développeurs ne savent pas comment utiliser proprement ce plugin, parce que d'après la doc...

Tu as raison : je fais partie de ces développeurs !

1- Mea culpa : je ne connaissais que la version "Client-side processing", sur laquelle est basée toute mon argumentation !

Client-side processing: Full dataset is loaded up-front Data can be read from DOM, JS data source or via Ajax Data processing is performed in the browser For small to medium data sets Points to consider: Time to download the full dataset Complex ordering on large data sets can slow the browser down

Traitement côté client: L'ensemble de données complet est chargé en amont Les données peuvent être lues à partir de la source de données DOM, JS ou via Ajax Le traitement des données est effectué dans le navigateur Pour les ensembles de données petits à moyens Points à considérer: Il est temps de télécharger l'ensemble de données complet Un ordre complexe sur de grands ensembles de données peut ralentir le navigateur

2- Alors qu'il existe en effet un "Server-side processing" :

Server-side processing: Ajax request made for every redraw Only the data needed is loaded Server performs the processing Ideal for large data sets Points to consider: Latency of Ajax requests Can your server handle the load of lots of requests?

Traitement côté serveur: Demande Ajax faite pour chaque redessin Seules les données nécessaires sont chargées Le serveur effectue le traitement Idéal pour les grands ensembles de données Points à considérer: Latence des requêtes Ajax Votre serveur peut-il gérer la charge de nombreuses demandes?

Je vais donc :

• LIRE le mode d'emploi "Server-side processing"
• TESTER, pour bien comprendre comment ça fonctionne... -> grâce à l'"exemple"

[Toufik83]

Bonjour jreaux62,

Le fichier /data-source est un fichier serveur (php ou autre) qui génère une réponse json pour la transmettre à DataTable, et c'est ce qui m’énerve dans la doc parce qu'elle est très mal documentée.

Les données peuvent avoir plusieurs structures, soit un simple array :

Code json :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
{
    "draw": 1,
    "recordsTotal": 57,
    "recordsFiltered": 57,
    "data": [
        [
            1,
            "Angelica",
            "Ramos",
            "System Architect",
            "London",
            "9th Oct 09",
            "$2,875"
        ],
        ...
    ]
}

Soit un array contenant des objets :

Code json :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
{
    "draw": 1,
    "recordsTotal": 57,
    "recordsFiltered": 57,
    "data": [
        [
            {
                "DT_RowId":1,
                "first_name": "Angelica",
                "last_name": "Ramos",
                "position": "System Architect",
                "office": "London",
                "start_date": "9th Oct 09",
                "salary": "$2,875"
            }
       ],
       ....
    ]
}

L'exemple du data est juste un peu en bas de la page, et lorsqu'on parle de serverSide le format de data doit être obligatoirement du json.

[Invité]

Je suis aussi tombé sur cet exemple, qui utilise un fichier PHP.

En fait, la DOC est bien faite... mais il faut savoir où et quoi chercher !



N.B. A ma décharge, j'avais déjà créé (il y a longtemps) mon propre système de pagination PHP/Ajax, bien avant de connaitre DataTable.

D'autre part :

• je ne vois pas comment on peut ajouter des colonnes à la <table>, avec des boutons "Modifier" / "Supprimer", par exemple.
• Ni même un simple lien <a> (supposons un listing d'articles : sur les titres de chaque article)
• Ni comment ajouter une classe CSS sur une ou des lignes (selon certains critères)...

Je pense donc conserver mon propre système de pagination PHP/Ajax.

[Toufik83]

je ne vois pas comment on peut ajouter des colonnes à la <table>, avec des boutons "Modifier" / "Supprimer", par exemple.

Tu peux le faire avec column.defaultContent.

Ni comment ajouter une classe CSS sur une ou des lignes [I](selon certains critères)

.
Ils existent des callbacks createdCell pour les <td> et createdRow pour les lignes, voir la liste de tous les callbacks de DataTable (cliques sur les boutons noir pour lister les options par groupe).

Comme il est possible d'ajouter par exemple des <select>,<input type="text" />... dans chaque <th> du footer afin de permettre la rechercher par colonne, voir l'exemple.