Данные не отображаются должным образом с таблицей, созданной в JavaScript

Question

У меня есть таблица

<table class="display" id="tbl">
            </table>

Используя javascript, я создал строковые данные и затем использовал

$('#tbl').append(data);

После этого я использую

$('#tbl').DataTable();

Чтобы сделать таблицу доступной для данных.

Все HTML для таблицы является правильным.Он выполняет некоторое форматирование таблицы, но выглядит по-другому, и нет нумерации страниц или возможности отображать определенное количество записей.

Я получаю следующие ошибки в консоли:

    jQuery.Deferred exception: e[i] is undefined X@https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js:66:150
wa@https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js:70:284
e@https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js:91:115
n/<@https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js:93:118
each@https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js:2:2813
each@https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js:2:1001
n@https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js:83:194
h.fn.DataTable@https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js:165:488
@file:///Users/Samprit/Documents/jsontable/employees.html:86:23
j@https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js:2:29566
g/</k<@https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js:2:29882
undefined

&

TypeError: e[i] is undefined

Answer 1

Решил эту проблему.

$('#tbl').DataTable();

Должно быть сделано после загрузки таблицы. Таким образом, добавление к функции и ее вызов это решило проблему.