(Message mis à jour en fonction de l'aide que j'ai obtenue entre-temps)
J'essaie de faire remplir dynamiquement ma table de données jQuery via Ajax (à la fois th et td). p>
Pour ce faire, je suis religieusement un script jsfiddle que j'ai trouvé ici et cela semble fonctionner.
La différence est que la personne qui a écrit ce script vient de coder en dur sa variable "dataSet" avant de l'utiliser alors que je dois la générer automatiquement à partir de php puis l'analyser dans jQuery.
Quand j'essaye de le faire, tout ce que j'obtiens c'est:
var my_columns = [];
var dataSet =[];
$.ajax({
type: "GET",
url: "php/ajax/get_table_values.php",
data: 'value1=1',
datatype:'json',
cache: false,
success: function(response){
dataSet = JSON.parse(response);
//instead of "dataSet=response;"
$.each(dataSet[0], function(key, value) {
var my_item = {};
my_item.data = key;
my_item.title = key;
my_columns.push(my_item);
});
}
});
console.log(dataSet);
var dataTable = $('#example').DataTable({
'bInfo' : false,
'paging' : false,
'scrollX': false,
'processing':false,
'sDom' : 'ltipr',
'data' : dataSet,
"columns": my_columns
});
L'Islam m'a beaucoup aidé par le chat en attendant et il semble que le formatage et console.log (dataSet) sont maintenant ok.
Voici ma tentative (mise à jour):
HTML:
success: function(response){
dataSet = JSON.parse(response);
//instead of "dataSet=response;"
$.each(dataSet[0], function(key, value) {
...
});
}
PHP:
TypeError: e is not an Object. (evaluating '"length"in e') TypeError: undefined is not an object (evaluating 'e[i].aDataSort')
jQuery:
/*
var dataTable = $('#example').DataTable({
'bInfo' : false,
'paging' : false,
'scrollX': false,
'processing':false,
'sDom' : 'ltipr',
'data' : dataSet,
"columns": my_columns
});
*/
islam jsFiddled le code avec certaines de mes données de production et il fonctionne mais je reçois toujours le message d'erreur de mon côté. Donc, c'est vraiment un mystère.
Ce que je vous montre ici est exactement ce que j'ai. Il n'y a donc rien d'autre qui change la donne.
J'utilise le même jQuery et dataTables que dans l'islam jsFiddled . Les deux sont définis et fonctionnent car j'utilise avec succès dataTables, à l'exception de cette tentative spécifique de récupération des données du serveur. Je n'utilise aucune autre bibliothèque.
quand je "console.log (dataSet)" de mon côté, voici ce que j'obtiens (ce qui semble bien):
[
{
"Header1" : "tyurtyu",
"Header2" : "zertzert",
"Header3" : 123
},
{
"Header1" : "sdfsdfsd" ,
"Header2" : "dsfgsdfg",
"Header3" : 456
}
]
5 Réponses :
Vous utilisez $ .each il faut un objet. Essayez dans votre changement de fichier php $ dataset = json_encode ($ dataset);
Et je pense que $ dataset doit être un tableau
Et ceci
<?php
$dataset=array();
...
while($row = mysqli_fetch_assoc($sql)) {
....
$dataset[]=array(
"Header1" : $string_val1,
"Header2" : $string_val1,
"Header3" : $string_val1
);
}
Et essayez le code de l'Islam, je pense que c'est le bon code, entrez
$dataset=json_encode($dataset, Json_force_object);
... ici
Merci pour votre réponse. J'ai essayé ça. Et en plus de cela, j'ai essayé d'ajouter "json" comme type de données dans ajax mais avec ou sans, j'obtiens les mêmes messages d'erreur. La différence est que, sans json_encode, le formatage est plus proche de l'original (sinon, il est très compliqué). À propos du "tableau". Si je fais cela, mon formatage php n'a aucun sens car ce ne serait plus une chaîne. Et si je dois changer cette chaîne en un tableau réel, alors je suis perdu car je ne sais pas comment générer à distance le même dataSet du côté jQuery. Vous avez peut-être raison, mais j'ai besoin de plus de conseils alors ...
Vous n’avez pas besoin de créer une chaîne, mais un tableau au format correct:
$dataset=array();
...
while($row = mysqli_fetch_assoc($sql)) {
....
$array_tmp = array();
$array_tmp["Header1"] = $string_val1;
$array_tmp["Header2"] = $string_val1;
$array_tmp["Header3"] = $numval3;
$dataset[] = $array_tmp;
}
C'est ca le truc. Comment obtenir le bon format? Je soupçonne que c'est un problème de format mais à la fin, je suis bloqué parce que je ne sais pas comment obtenir ce format. Au moins, avec une chaîne à cordes, je peux obtenir ce que j'ai. Au-delà de ça, je n'en ai aucune idée.
@BachirMessaouri avez-vous vérifié mon code? Je vous ai un peu donné une idée comment obtenir le bon format :-)
Oui. Si je fais exactement cela et echo $ dataset (sans rien changer dans jQuery), alors j'obtiens exactement les mêmes messages d'erreur. Merci de votre aide.
Pourriez-vous console.log (dataset) et console.log (my_columns)?
Voir l'article original, vous pouvez y voir le console.log pour dataSet. Je ne peux pas avec my_columns car l'erreur se produit avant la génération de my_columns.
@BachirMessaouri avec mon code, il n'y a aucun moyen que votre console.log (ensemble de données) renvoie la même valeur que votre message ...
Continuons cette discussion dans le chat .
<?php
$dataset='';
...
while($row = mysqli_fetch_assoc($sql)) {
....
$dataset[]=array(
"Header1" : $string_val1,
"Header2" : $string_val1,
"Header3" : $string_val1
);
}
...
echo json_encode($dataset);
use $dataset as array and just echo the json encoded array to get json object in the script
J'ai fait cela et cela a aidé, mais le message d'erreur apparaît toujours (voir le script mis à jour dans le message d'origine).
essayez de remplacer dataSet [0] par dataSet en $ chacun
Merci pour votre réponse. J'ai essayé et essayé encore une fois maintenant, cela ne change rien. Fait intéressant, dans les deux jsFiddle fonctionnels que j'ai fournis dans le message d'origine, si vous utilisez dataSet au lieu de dataSet [0], alors la bibliothèque dataTable vous enverra une erreur.
$ .each (dataSet [0], function (key, value) {var my_item = {}; my_item.data = key; my_item.title = key; my_columns.push (my_item);}); console.log (my_columns) $ (document) .ready (function () {$ ('# example'). DataTable ({data: dataSet, "columns": my_columns});}); essayez ceci et vérifier la console pour ce qu'il y a dans mes_colonnes
Même erreur sans sortie. Ce qui a du sens car l'erreur commence à l'ouverture de $ .each (). Ainsi, la console ne sortira pas le tableau "my_columns" qui n'est pas encore généré. Même si je vide complètement le $ .each, j'obtiens le message d'erreur. Ce $ .each semble être à l'origine du problème, pas ce qu'il y a à l'intérieur. Merci beaucoup pour vos tentatives, elles sont appréciées.
Je l'ai fini par sortir mes_colonnes! J'ai changé dataset = response avec dataSet = JSON.parse (response). Donc mon premier message d'erreur a disparu. Reste toujours le deuxième lorsque vous essayez d'appeler dataTables. TypeError: undefined n'est pas un objet (évaluation de 'e [i] .aDataSort') Mais c'est un énorme pas en avant.
J'ai mis à jour le message d'origine (voir la deuxième partie de celui-ci). Je pense que c'est juste un problème de portée variable cette fois (obtenir dataSet en dehors de l'appel Ajax).
puis déplacez la boucle en dehors de l'appel ajax
Eh bien, je vais traiter le même problème que je devrais alors obtenir les données 'response' en dehors de l'appel ajax au lieu des données dataSet.Même chose vraiment (juste essayé).
Ok, résolu! Merci de votre aide. Je devais juste ajouter "async: false".
Problème résolu!
Ok, j'ai finalement réussi à le faire fonctionner, avec l'aide précieuse de l'islam et les conseils de Shafeeque TP. Tous les gens qui ont posté m'ont beaucoup aidé. Merci à tous.
Premièrement, le PHP devait avoir raison:
var my_columns = [];
var dataSet =[];
$.ajax({
...
async: false,
...
success: function(response){
...
}
});
Cela a formaté le tableau dataSet comme il se doit.
Ensuite, les données passées de la réponse à dataSet dans l'appel jQuery ajax ont dû être corrigées:
success: function(response){
dataSet = JSON.parse(response);
//instead of "dataSet=response;"
$.each(dataSet[0], function(key, value) {
...
});
}
Le premier message d'erreur a maintenant disparu.
Et puis j'ai dû accéder aux tableaux dataSet et my_columns en dehors de l'appel Ajax:
<?php
$dataset=array();
....
while($row = mysqli_fetch_assoc($sql)) {
.....
$array_tmp = array();
$array_tmp["Header1"] = $alias;
$array_tmp["Header2"] = $chambres;
$array_tmp["Header3"] = $adresse;
$dataset[] = $array_tmp;
}
....
echo json_encode($dataset, JSON_UNESCAPED_UNICODE);
?>
Et maintenant, ça marche. Les deux jsfiddle fonctionnels dans la question originale n'ont pas aidé précisément parce qu'ils ne contenaient aucun tableau à convertir et c'était le problème. Heureusement, j'y suis finalement arrivé.
Merci à vous tous pour vos conseils. Très apprécié!
sur votre fichier php, faites quelque chose comme ceci:
var tableTypeOfClientInfo = $('#tableTypeOfClientInfo ').DataTable({
"destroy": true,
"responsive":{
"details": {
renderer: function ( api, rowIdx, columns ) {
var data = $.map( columns, function ( col, i ) {
return col.hidden ?
'<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
'<td>'+col.title+':'+'</td> '+
'<td>'+col.data+'</td>'+
'</tr>' :
'';
} ).join('');
return data ?$('<table/>').append( data ) :false;
}
}
},
"autoWidth": false,
"ajax": {
"url": 'some.php',
"method": 'POST',
data:{action:"SLC", categoryId:id}
},
"columns": [
{"data": "identification_number"},
{"data": "address"},
{"data": "birthday"},
{"data": "phone"},
{"data": "mail"}
],
"language":{"url": "//cdn.datatables.net/plug-ins/1.10.15/i18n/Spanish.json"},
"columnDefs": [
{
"className": "dt-center", "targets": "_all"
}
]
});
puis dans votre javascript, appelez-le comme ceci:
if ($_POST["action"] == "SLC" && isset($_POST["categoryId"])) {
$category= $_POST["categoryId"];
//do your query here btw use PDO is better
//fill your data here and then return it
$result = $command->fetchAll(PDO::FETCH_ASSOC)
$return["data"] = $result;
echo json_encode($return,JSON_UNESCAPED_UNICODE);
}
Salut et merci pour votre aide. Comme je l'ai publié récemment, mon problème est résolu. Cependant, votre script ajoute-t-il quelque chose d'utile que je devrais considérer pour améliorer le mien?
@BachirMessaouri ouais si vous avez dd le script datatable pour les trucs réactifs, il gère les lignes dans la méthode responsive également il remplit le datatable avec la méthode datatable utilisant ajax
OK merci. Mais alors comment l'améliorerais-tu pour récupérer les en-têtes de manière dynamique (c'est le but de mon script mais le vôtre n'aborde pas ce point, ce qui est important pour moi)? Je vois ici que vous devez coder en dur les noms de vos colonnes.
@BachirMessaouri dans mon exemple, vous devez avoir un div prédéfini avec les noms d'en-tête, ce que vous pouvez faire dans ce cas est de placer l'appel datatable dans un événement click, puis les données du segment sont un tableau que vous pouvez obtenir à partir de votre php et le charger dans votre div avec les noms des têtes
définir dataType: "json", en ajax.
J'ai fait ça mais ça n'a pas marché. Il génère simplement plus de barres obliques inverses dans le tableau, mais les messages d'erreur sont exactement les mêmes. Et dataSet [0] est exactement ce qui est dans l'exemple jsfiddle mais il fonctionne et génère toutes les valeurs.
avez-vous ajouté des fichiers js datables?
Oui. DataTables fonctionne pour tout le reste sauf cela.