Jquery datatables không hiển thị tiêu đề cột

Question

Tôi đang theo dõi the example here. Sử dụng mảng chứa đối tượng.

tôi tạo mảng của tôi trong một vòng lặp for như

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

thực hiện DataTable của tôi này:

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

Tôi nhận được dữ liệu chính xác nhưng không có tiêu đề cột, am i thiếu một cái gì đó?

Answer 1

Cố gắng thay đổi yếu tố <table> của bạn như thế này:

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

Bằng cách đó các tiêu đề được tạo ra. Nếu bạn nhấp vào nguồn xem trên trang mẫu, bạn sẽ thấy cùng một triển khai.

Answer 2

Nếu bạn đang đi qua trong dữ liệu dưới dạng một mảng của các đối tượng, sau đó bạn sẽ cần phải chỉ rõ tiêu đề của mỗi cột bằng tay:

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

Lưu ý: đây sẽ không yêu cầu bạn chỉ định tiêu đề trong phần tử table của mình. Tất cả những gì bạn cần là một số trống rỗng <table> và thao tác này sẽ hoạt động. Tài liệu here.

Answer 3

Dưới đây sẽ tạo ra tiêu đề động

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