JQuery datatables не показывает заголовки столбцов

Я пример здесь. Использование массива, содержащего объект.

Я создаю свой массив в цикле for, как это

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

моя реализация datatable:

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

Я получаю данные правильно, но без заголовков столбцов, я что-то пропустила?

8
datatables jquery

4 ответов

попробуйте изменить свой <table> элемент такой:

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

этак созданные заголовки. Если вы нажмете кнопку Просмотреть источник на странице примера, вы увидите ту же реализацию.

4

Если вы передаете данные в виде массива объектов, то вам нужно будет указать названия каждого столбца вручную:

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

Примечание: это не требуется указать заголовки table элемент. Все, что вам нужно, это пустой <table> и это будет работать. Документация здесь.

32

ниже будет создавать заголовки динамически

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

Если ваш переход в массив данных и элемент таблицы скрыт во время инициализации datatable, то все элементы thead/tfoot и каждый дочерний элемент получают встроенный стиль height:0px, добавленный к ним.

обязательно покажите () элемент таблицы прямо перед инициализацией datatable, если вы не хотите вернуться после и изменить все стили высоты всех элементов. 

// unhide your table
$('#dtableid').show();

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