Datacables Jquery bez nagłówków kolumn

Question

Podążam za the example here. Używanie tablicy zawierającej obiekt.

tworzę tablicę w pętli for jak ten

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

My elementu datatable realizacji:

$(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"] 
     } 
    }); 
}); 

Dostaję dane poprawnie, ale bez nagłówków kolumn, jestem brakuje czegoś?

Answer 1

Spróbuj zmienić elementu <table> tak:

<table id=report> 
    <thead> 
     <tr> 
      <th>Header 1</th> 
      <th>Header 2</th> 
     </tr> 
    </thead> 
</table> 

W ten sposób tworzone są nagłówki. Jeśli klikniesz opcję wyświetl źródło na przykładowej stronie, zobaczysz tę samą implementację.

Answer 2

Jeśli przekazując dane w postaci tablicy obiektów, a następnie trzeba podać tytuły każdej kolumny ręcznie:

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

UWAGA: To będzie wymagać nie możesz określić nagłówki w swoim table elemencie. Wszystko czego potrzebujesz to pusty <table>, a to zadziała. Dokumentacja here.

Answer 3

Poniżej Tworzenie nagłówków dynamicznie

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