jQuery ajax remplissage de la table html
Si j'ai une table:
<table>
<thead>
<tr>Col1</tr>
<tr>Col2</tr>
<tr>Col3</tr>
</thead>
<tbody>
</tbody>
</table>
Quelle est la manière la plus rapide et la plus efficace pour remplir le tr avec tr éléments contenant mes données à partir d'une base de données à l'aide d'un Ajax de Jquery. (sauf si vous avez une meilleure façon)
Retour code html de le webservice OU créer dynamiquement le code html en Javascript?
J'ai également à l'appui de l'utilisateur "forer vers le bas; c'est à dire soit en cliquant sur un > ou double-cliquant sur la ligne pour ouvrir une fenêtre pour montrer quelques informations supplémentaires. (y compris une autre table et le détail des informations renvoyées par un webservice)
Toutes les idées sont les bienvenues!
Je suggère d'utiliser le jquery template de plugin pour insérer les données dans la table.
OriginalL'auteur kralco626 | 2011-05-18
Vous devez vous connecter pour publier un commentaire.
Je travaille sur une grande échelle de portail d'entreprise qui utilise jQuery et AJAX. J'ai mis en place
jQuery Templates
et lajQuery TableSorter plug-in
pour faciliter cela. Voici un exemple de code:Javascript (Fournisseur De Données): Data.Lists.js
HTML (le modèle)
Data.Lists.js
etGetListItems
des trucs?En aparté, avec table trieur il n'y a aucun moyen d'obtenir excel comme le filtrage, est-il? Aussi l'expansion de la table afin que je puisse montrer les détails de l'information serait aussi difficile, je pense? L'ajout d'une autre ligne pour plus de détails serait gâcher le tri...
J'ai créé une classe wrapper qui consolide notre
$.ajax
appels. C'est bien parce que nous pouvons mettre à jour la couche de données en un seul endroit. Par exemple, jQuery révisé l'ensemble de la$.ajax
espace de noms dans la dernière version, et au lieu de changer tout l'ajax à travers le site, nous avons juste mis à jour les données des fichiers de classe 🙂 nos classes de données sont structurées comme:data.js
,data.lists.js
,data.users
,data.groups.js
,data.cache.js
, etc...Vous pouvez écrire excel-like-filtrage de la coutume (comme je l'ai fait avant) ou de mettre en œuvre un plug-in. L'ajout d'une autre ligne peuvent entrer en conflit avec tri, mais je réagirais différemment. Par exemple, sur l'une de nos tables, lorsqu'un utilisateur clique sur une action nous venons de faire une autre requête ajax et afficher plus d'informations dans une info-bulle ou pop-up modal div.
ah oui, je vois. Nous avons fait une chose semblable, mais sur une plus petite échelle, j'ai une fonction qui prend dans les trucs de base, comme le nom du service, les paramètres de réussite et d'échec des rappels... Donc je n'aurais plus qu'à changer quelque chose une fois dans cette fonction. Pas aussi bon que ce que vous avez fait cependant... :-p
OriginalL'auteur pixelbobby
Sauf si vous avez besoin pour créer des milliers de lignes, la performance est tout simplement pas une préoccupation ici. Lorsque vous générez le balisage est vraiment une décision de conception. Vous pouvez générer le balisage:
$.tmpl
, Moustache...)Côté Client sera (théoriquement) diminution de la charge sur votre serveur, mais ce n'est probablement pas une question pertinente. Selon la saveur que vous choisissez, vous devriez l'utiliser constamment tout au long de votre application, sauf s'il est vraiment de raison valable de faire autrement.
Comment pouvez-vous tirer cette conclusion? L'appel ajax pourrait renvoyer des données HTML.
Le serveur n'est pas de savoir si c'est un appel ajax ou pas. Est tous HTTP, bébé.
ce n'est pas une grosse affaire, tant que vous réduisez le nombre de manipulations DOM. Vous pouvez construire une grande chaîne HTML et insérez une fois plutôt que d'insérer chaque ligne individuellement - de bien meilleures performances.
Je suis d'accord que l'un des services web émettant des balises HTML est juste à plat de mal, car il ne supporte pas bon la séparation des préoccupations. Je préférerais avoir un service web qui renvoie du JSON, de cette façon, il peut être manipulé facilement pour s'adapter à tous les évolution exigences de conception au fil du temps. Vous pouvez toujours mettre en œuvre un mécanisme coté client qui charge les données progressivement.
OriginalL'auteur Matt Ball
Retour HTML à partir de la webservice étroitement les couples de votre code. La meilleure des deux moyens est de créer le code HTML en Javascript.
OriginalL'auteur SquidScareMe
Vous pouvez utiliser jQuery .ajax() pour renvoyer les données dans un objet JSON et l'utilisation de l' .tmpl() plugin de template pour afficher le code html.
Vous pouvez afficher le template de documentation ici : http://api.jquery.com/tmpl/
Mise à jour: j'ai posté un exemple comme une réponse à une autre question
OriginalL'auteur ShaneBlake
Cette solution fonctionne très bien pour moi.
J'ai simplement récupérer un deux dimension JSONed tableau à partir d'un AJAX PHP appel.
(À l'aide de la fonction php json_encode())
Puis il suffit de parcourir le tableau pour construire de pénétration des lignes de la table. comme illustré ici.
Note la plus "json" paramètre.
L'ensemble de la table peut être tranquille facilement manipulés avec jQuery standards,
de l'ajout d'une ligne d'en-tête, tournant l'un ou plusieurs des lignes ou des tables dans les champs de saisie.
Je suppose que vous n'avez pas à utiliser PDO routines pour obtenir les détails de la base de données si vous ne voulez pas.
Ci-dessous est une image d'un tableau construit à l'aide de la technique ci-dessus
OriginalL'auteur Sydwell