2015-05-15 2 views
1

Я пытаюсь создать таблицу, которую я создаю на лету с JavaScript, в .dataTable. Я сравнил свой код с моими сотрудниками, и он почти идентичен. Я внесла необходимые изменения, но я продолжаю получать ошибку JavaScript: «Невозможно прочитать« parentNode »свойства« null »в консоли.Добавление таблицы данных в таблицу HTML с JavaScript: невозможно прочитать свойство «parentNode» из null

Весь код исполняется отлично. Новая таблица отображается в браузере, но как только она пытается запустить строку $('#data').dataTable({"paging": false});, она дает мне ошибку.

Может ли кто-нибудь увидеть, что вызывает это? Возможно, ошибка области или скобки/скобки в неправильном месте.

function Load(p1, p2) { 

var work= ""; 

$('#div1').empty(); 

var tablearea = document.getElementById('div1'), 
table = document.createElement('table'); 
table.id = "data"; 
table.style.fontSize = "small"; 
table.width = "100%"; 

var tbody = document.createElement('tbody'); 
tbody.id = "dataTB"; 
table.appendChild(tbody); 
tablearea.appendChild(table); 

var url = sessionStorage.baseUrl + "XXXXXXXXX"; 

$.getJSON(url) 
    .done(function (data) { 

     var results = $.parseJSON(data); 

     if (results != null) 
     { 
      for (i = 0; i < results.length; i++) { 
        work += "<tr><td>" + results.data[i].info + "</td></tr>"; 
       } 
     } 

     $('#dataTB').html(work); 

     $('#data').dataTable({"paging": false}); 
    }) 
    .fail(function (jqXHR, textStatus, err) { 
     alert('Error: ' + err); 
}); 
} 
+2

Я чувствую, что мы не видим все. , , где определяется 'table'? Где происходит ошибка, в соответствии с консолью (потому что я не вижу ссылки на «parentNode» в вашем коде)? – talemyn

+0

Ну, я определяю таблицу в пятой строке с помощью var tablearea = document.getElementById ('div1'), table = document.createElement ('table'); table.id = "data"; table.style.fontSize = "small"; таблица.width = "100%"; , но это командный проект, состоящий из множества файлов, но ошибка parentNode кажется общей ошибкой, не относящейся к конкретной переменной parentNode. – webminer07

+0

Ну, 'parentNode' не является переменной, это свойство JS' Объект узла (https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode), который представляет родительский элемент текущего узла элемента. Основываясь на ошибке, где-то в логике для 'dataTable', она пытается найти« parentNode »несуществующего элемента. Моя ставка заключается в том, что вы вызываете '$ ('# data'). DataTable ({" paging ": false});' перед тем как элемент таблицы 'data' закончил добавляться в DOM, поэтому он не может Найди это. – talemyn

ответ

4

Я думаю, вы должны включать действительный thead элемент в таблице

+1

Это было по существу это. Мне пришлось добавить ** thead/tfoot ** и ** ** для правильной работы dataTables. Угадайте, что он учит меня не предполагать, что нужно, и читать документацию. – webminer07

1

Я бы не добавить таблицу в DOM, пока строки данных не были добавлены в таблицу. Так что я хотел бы попробовать что-то вроде следующего вместо (внутри обратного вызова JSON):

var tbody = document.createElement('tbody'); 
    tbody.id = "dataTB"; 
    table.appendChild(tbody); 

var tablearea = document.getElementById('div1'), 
    table = document.createElement('table'); 
    table.id = "data"; 
    table.style.fontSize = "small"; 
    table.width = "100%"; 

for (i = 0; i < results.length; i++) { 
    $(tbody).append("<tr><td>" + results.data[i].info + "</td></tr>"); 
} 

tablearea.appendChild(table); 

Вот Workin jsbin: http://jsbin.com/vacabe/1/

+0

Я пробовал и это, и Алон, и не работал. Также я получаю сообщение об ошибке «Uncaught TypeError: Не удается прочитать свойство« mData »неопределенного« – webminer07

+0

@ webminer07 вы можете опубликовать то, что у вас есть целиком в jsbin? – micahblu

1

Я имел эту проблему при использовании DataTables.js каталога, и я решил ее пустой стол перед любое обновление или пополнение:

$('#data').empty(); 
0

У меня была такая же ситуация с этой библиотекой. Я использую его с Knockout.JS и заставить его работать я добавил в конце моего ViewModel таймаута:

setTimeout(() => { 

    // Call the get function at load 
    GetFiltersData(); 

}, 0); 

Это не повлияет на вас страницу и я проверил это с несколькими браузерами с успехом.

+0

var table = $ ("# table"). Ближайший ("table"). DataTable(); table.clear(); это последнее обновление, которое я сделал для своего кода и работал еще лучше –

Смежные вопросы