DataTables comment les ajouter de manière dynamique en jquery ou javascript
Je suis à l'aide de jQuery Datatables sur un site, mais toutes les données dans le tableau change à chaque fois que j'appuie sur un autre lien hypertexte. Donc, plutôt que de supprimer les lignes et les ajouter un par un, est-il un moyen de supprimer dynamiquement l'ensemble de la DataTable et recréer un autre avec toutes les données d'un tableau.
Le code ici est juste de l'ancien régime statique des trucs, mais je sais comment récupérer dynamiquement le tableau, disons-le tableau ressemble à ça quand je l'ai récupérer à partir de python/cherryPy:
ar[n]=["col1","col2","col3","col4",..."coln"] :
Le code ci-dessous est le code statique pour la création de la DataTable dans le code HTML (statique)...
<div id="div1" class="ctnr">
<table id="mainTable1" class="dtable" cellpadding="3" cellspacing="1" border="0">
<thead>
<tr><th>*</th><th>Proposal</th><th>Vote </th><th> For </th><th>dd</th><th>A</th></tr>
</thead>
<tbody id="tbdy">
<tr id="zrow1" class="gradeX"><td><input id="ckb1" type="checkbox" class = "tb" /></td><td id="ppl1" class="ppsal" style="width:55%">BlaBlaBla</td><td>More BlaBlaBla</td><td class="ralign"> CheeCheeChee</td><td class="ralign"> ChooChoo...</td><td class="ralign"> LaLaLa</td></tr>
</tbody>
</table>
</div>
Comment faire en JavaScript ou jQuery?
Dennis
- qu'avez-vous essayé? à la recherche pour juste un peu d'entrée? essayez de jquery .html() la fonction
- J'ai regardé le DataTable forum et tout le monde semble faire une énorme et complexe de répondre à des cas spéciaux. J'ai juste besoin d'un cas générique. Il doit être simple
- À l'aide de json à remplir est une jolie approche commune. Voir stackoverflow.com/questions/9760661/...
- Merci, je suis en mesure de transporter les données. Ce n'est pas mon souci.
Vous devez vous connecter pour publier un commentaire.
DataTables vous permet de définir la structure et les données de la table par programmation à l'aide de ce qu'ils appellent "sources de données".
Il y a quelques exemples dans la documentation. Je ne suis pas sûr que l'on va vous convenir mais en voici quelques unes pour vous aider à démarrer:
Vous pouvez combiner cela avec le
détruise()
méthode pour éviter de recréer la<table>
tag.Une autre approche serait de re-définir les lignes sans avoir à recréer la table. Il n'existe pas de méthode setData() que je connais, mais vous pouvez utiliser la
fnClearTable()
etfnAddData()
méthodes pour obtenir le même résultat. Vous pouvez lire plus au sujet de ces méthodes dans le Les tables de données de l'API docs.fnDestroy()
: datatables.net/apibonjour j'ai eu le même problème... et c'était la façon dont je l'ai résolu...
j'ai eu cette fonction dans une laravel contrôleur... que des boucles et crée un tableau dynamiquement.. basées sur les $app_id variable... et j'ai dû ajouter de la datatable pour elle... au moment de l'exécution...
l' $str fonction est le ciment de la construction du tableau de données... et je reprends le tableau de la page directement dans la balise div avec l'id " panel_data_tb ", qui se fait sur le fichier javascript..
la dernière ligne.. trouve la table à l'intérieur de la balise Div et initialise la datatable() bien sur il de façon dynamique. donc, à chaque fois que vous changez le contenu de la table, la table de données est ré-initialisé sur la dynamique de la table en cours de création..
j'espère que cette aide. merci.