Je suis suivi L'exemple ici . Utilisation d'un matrice contenant un objet.
i Créez mon tableau dans A pour boucle comme ceci P> My DataTable implémentation: P> $(document).ready(function() {
$('#dynamic').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="report"></table>');
$('#report').dataTable({
"aaData": historyArray,
"aoColumns": [
{ "mDataProp": "User" },
{ "mDataProp": "Timestamp" },
{ "mDataProp": "Latitude" },
{ "mDataProp": "Longitude" }
],
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": '<"H"Tfr>t<"F"ip>',
"oTableTools": {
"sSwfPath": "swf/copy_csv_xls_pdf.swf",
"aButtons": ["copy", "csv", "xls", "pdf"]
}
});
});
5 Réponses :
Essayez de changer votre de cette façon les en-têtes sont créés. Si vous cliquez sur Afficher la source sur l'exemple de page, vous verrez la même mise en œuvre.
Oh, pensais que cela tirerait de manière dynamique .. de toute façon cela a fonctionné :)
@Vincelowe Je pense que cela dépend de la structure des données. J'ai utilisé de manière approfondie des datables et j'avais eu des colonnes montrant de manière dynamique une fois de temps en temps. Par exemple, si vous utilisez GridView (C #), puis appliquez des datables à ce sujet, il prendra les en-têtes de GridView. De plus, si vous spécifiez vos propres en-têtes, vous pouvez ajouter des filtres (comme des dépositions ou des zones de texte).
Je suis codé en tête comme ci-dessus, mais il me semble que vous ne devriez pas avoir à épeler les en-têtes dans le HTML ... je pose Ceci re: générer dynamiquement des en-têtes dans l'espoir d'aider quelqu'un ou de le faire fonctionner à un moment donné ...
Bien que cela fonctionne, c'est la mauvaise approche et devrait être découragé en faveur de l'option de configuration User1429980. Si vous passez dans des données sous la forme d'une matrice d'objets, vous devez spécifier les titres de chaque colonne manuellement:
Cela devrait être la bonne réponse. On dirait qu'il convient à tous les scénarios.
Merci, je me demande pourquoi cela n'est pas mentionné pour l'exemple particulier de la documentation de DataTables? J'ai passé 30 minutes à essayer de le réparer de lire les docs jusqu'à ce que je reçois votre réponse
Merci beaucoup! Je récurenis la documentation de datables pour cela, mais je ne pouvais pas le trouver.
@Vicelowe Pouvez-vous échanger la réponse acceptée à cela car cela fonctionne réellement ..
J'aime cette réponse sur le choisi car il conserve la liaison entre les données et les colonnes au même endroit. J'ai eu des problèmes chez mes entreprises où les en-têtes sont spécifiés dans le HTML et obtiennent les mauvaises données car la commande est différente dans le JS. Cela rend beaucoup moins probable. ci-dessous créera des en-têtes dynamiquement Si vous passez dans une matrice de données et votre élément de table est caché au moment où vous initialisez votre datatable, tous les éléments THEAD / TFOOT, et chaque élément enfant, obtient une hauteur: 0px Style en ligne ajouté. Assurez-vous d'afficher () l'élément de table juste avant d'initialiser votre datatable, sauf si vous souhaitez revenir après et modifier tous les styles de hauteur de tous les éléments. Nous pouvons également imprimer l'en-tête de colonne DataTable comme ceci: Elément comme ceci:
4 commentaires
40
votes
data = this.SearchController.resultSet;
this.$tableContainer.dataTable({
data: data,
columns: [
{
data: "H",
title: "Thickness"
},
{
data: "InstanceId",
title: "Instance ID"
}]
});
5 commentaires
1
votes
0 commentaires
2
votes
0 commentaires
1
votes
"columns": [
{
"data": "Sno", "name": "Sno", "autoWidth": true,"title":"S.No"
}
,
{
"data": "Result", "name": "Result", "autoWidth": true, "title": "Result", render: function (data1, type, full, meta) {
if (full.Count > 0) {
return '<a style="color:blue" href="#" class="point" onclick="ApprovalBreakUp(this)" value="' + data1 + '">' + data1 + '</a>'
}
else {
return '<label>' + data1 + '</label>'
}
}
}
,
{
"data": "Count", "name": "Count", "autoWidth": true, "title": "Count"
}
0 commentaires