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 expressions（(function(){}())），它们按照定义的顺序（在文档准备好之前）执行。因此，表无法在ConfTable中初始化，并且您的row.add()方法失败。

解决方案

在每个函数内检索表实例，或将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);
  }
}());

示例

有关代码和演示，请参见this example。

我执行row.add（）。draw（）时不会填充数据表

1 个答案:

问题

解决方案

示例