Jquery datatables ne montrant pas les en-têtes de colonne

Je suis l’exemple ici . Utiliser un tableau contenant un object.

Je crée mon tableau dans une boucle comme celle-ci

historyArray[i] = { "User": strUserName, "Timestamp" : date.toSsortingng(), "Latitude" : point.lat, "Longitude" : point.lng };

Ma mise en oeuvre datatable:

 $(document).ready(function() { $('#dynamic').html('
'); $('#report').dataTable({ "aaData": historyArray, "aoColumns": [ { "mDataProp": "User" }, { "mDataProp": "Timestamp" }, { "mDataProp": "Latitude" }, { "mDataProp": "Longitude" } ], "bJQueryUI": true, "sPaginationType": "full_numbers", "sDom": 't', "oTableTools": { "sSwfPath": "swf/copy_csv_xls_pdf.swf", "aButtons": ["copy", "csv", "xls", "pdf"] } }); });

Je reçois les données correctement mais sans en-tête de colonne, quelque chose me manque-t-il?

Essayez de changer votre élément

comme ceci:

    Header 1  Header 2

Ainsi, les en-têtes sont créés. Si vous cliquez sur Afficher la source sur la page d’exemple, vous verrez la même implémentation.

Si vous transmettez des données sous la forme d’un tableau d’objects, vous devrez spécifier les titres de chaque colonne manuellement:

 data = this.SearchController.resultSet; this.$tableContainer.dataTable({ data: data, columns: [ { data: "H", title: "Thickness" }, { data: "InstanceId", title: "Instance ID" }] });

Remarque: cela ne vous obligera pas à spécifier des en-têtes dans votre élément de table . Tout ce dont vous avez besoin est un

vide, et cela fonctionnera. Documentation ici .

Ci-dessous va créer des en-têtes de manière dynamic

 $('#dtableid').DataTable({ "aaData": [ { "abc": "123", "xyz": 456 }, { "abc": "123", "xyz": 456 } ], "aoColumns": [ { "mData": "abc", "title": "ABC", "bSortable": true }, { "mData": "xyz", "title": "XYZ", "bSortable": true } ] });

Si votre passage dans un tableau de données et votre élément de table sont masqués au moment où vous initialisez votre datatable, tous les éléments thead / tfoot, et chaque élément enfant, reçoivent un style inline height: 0px.

Assurez-vous de montrer () l’élément de table juste avant d’initialiser votre datatable, à moins que vous ne souhaitiez revenir en arrière et modifier tous les styles de hauteur de tous les éléments.

 // unhide your table $('#dtableid').show(); // initialize your datatable $('#dtableid').DataTable({ data: data, // .. other init options })