Datatables не заполняется, когда я делаю row.add (). Draw ()

Question

У меня есть приложение, к которому я пытаюсь перейти с использованием таблиц данных.Я убираю как можно больше из нерелевантного кода.По сути, это приложение, в котором пользователь выбирает из выпадающих меню ряд выборок и на основе этих выпадающих списков выбирает файл json, очищает таблицу, просматривает элементы в объекте json и добавляет строки в мою таблицу.В конце всего, что он перерисовывает.

Для начала, хотя я заполняю его данными по умолчанию, используя ту же самую операцию.Любой сценарий дает тот же результат, но он несколько объясняет, почему инициализация происходит в отдельном IIFE

. Когда я это делаю, я ничего не получаю.Нет ошибок JS, нет ничего.Просто пустые данные.Вот мой соответствующий HTML-код (я упрощаю его и запутываю вещи, но ничего такого, что должно иметь отношение:

   <table id="conf">
    <thead>
      <tr>
        <th class="header">a</th>
        <th class="header">b</th>
        <th class="header">c</th>
        <th class="header">d</th>
        <th class="header">e</th>
        <th class="header">f</th>
        <th class="header">g</th>
      </tr>
    </thead>
  </table>

И javascript

(function() {
  'use strict';
  var date="20190101"
  $(document).ready(function(){
    var table = $('#conf').DataTable({
      ordering:true,
      paging:false
    });
    ConfTable.PopulateTable(date);
  });
}());

var ConfTable = (function() {
  'use strict';    
  var table = $('#conf').DataTable();
  return{
     PopulateTable:function(){
      $.getJSON("data/conf/"+date+".json?_=" + new Date().getTime(),
      function(data, tableParam){
        table.clear().draw();
        GenerateTable(data)
        table.draw();
      });
    }
  }
  function GenerateTable(data) {
    for(var i=0; i<data.dockets.length; i++){
      addRow(data.dockets[i]);
    }
  }
  function addRow(thisCase) {
    table.row.add(
      [
        1,2,3,4,5,6,7
      ]
    );
  }
}());

Я намереваюсь поместить фактические данные вв конце концов, массив, но для упрощения поиска неисправностей это то, что я пытаюсь. Я также пытался добавить его в виде массива массивов с помощью table.rows.add, и этот массив будет выглядеть так:

[
  [1,2,3,4,5,6,7],
  [1,2,3,4,5,6,7],
  [1,2,3,4,5,6,7],
  ...
]

Я также попытался поместить объект вокруг оболочки:

{"data": [1,2,3,4,5,6,7]}

Во всех этих случаях конечный результат представляет собой инициализированный объект данных с выбранными параметрами без данных, как если быЯ не выполнил операцию table.row.add. ("No data available in table") Я прошел и подтвердил, что код выполняется должным образом, но я застрял в том, почему я не получаю никаких результатов назадЕсли вам нужна дополнительная информация, я с радостью ее предоставлю. Спасибо.

Answer 1

ПРОБЛЕМА

Проблема с вашим кодом в порядке выполнения кода.Ваша таблица инициализируется в ConfTable перед инициализацией в обработчике событий ready.

Вы используете функциональных выражений ((function(){}())), которые выполняются в порядкеони определены (и до того, как документ будет готов).Поэтому не удается инициализировать таблицу в ConfTable, а ваш метод row.add() завершается неудачей.

SOLUTION

Либо получить экземпляр таблицы внутри каждой функции, либо передать переменную table в качестве аргумента.

(function() {
  'use strict';
  $(document).ready(function(){    
    var table = $('#example').DataTable({
      ordering:true,
      paging:false
    });
    ConfTable.PopulateTable();
  });
}());

var ConfTable = (function() {
  'use strict';      
  return{
     PopulateTable:function(){
        var table = $('#example').DataTable();
        table.clear().draw();
        GenerateTable({
            dockets: [[1,2,3,4,5,6]]
        });
        table.draw();
    }
  }
  function GenerateTable(data) {
    for(var i=0; i<data.dockets.length; i++){
      addRow(data.dockets[i]);
    }
  }
  function addRow(thisCase) {
    var table = $('#example').DataTable();
    table.row.add(thisCase);
  }
}());

ПРИМЕР

См. этот пример для кода и демонстрации.