通过JSON文件在动态创建的表上运行dataTable

我使用$ .getJSON来检索json文件（如purchase.json），并通过processJSON（data）动态创建一个表，这是一个使用JSON内容动态创建表的函数。表格ID是“示例”。接下来，我需要将dataTable（一个jQuery插件）应用于此表，以便可以将分页和其他功能应用于表格。我的JavaScript是 -通过JSON文件在动态创建的表上运行dataTable

$(document).ready(function() { 
     $('#AJAXButton').click(function() { 
      $.getJSON('data/purchase.json', function(data) { 
       processJSON(data); 
      }); 
     }); 
    }); 

    $(document).ready(function() { 
     $('#example').dataTable({ 
      "sScrollY": "200px", 
      "bPaginate": false 
     }); 
    });

我能够创建与JSON内容的表，但dataTable功能不起作用。如何调整我的代码，使其工作？

感谢您的帮助。 C. L.

来源

2011-04-10 C. L.

我猜你的问题是$('#example').dataTable()在#example被填充之前执行。 #example表格将不会有任何内容，直到有人按#AJAXButton和getJSON完成;当调用.dataTable时，#example表可能存在，但数据表不知道从JSON blob加载到表中的数据。

解决办法是到DataTable绑定表填写后：

$(document).ready(function() { 
    $('#AJAXButton').click(function() { 
     $.getJSON('data/purchase.json', function(data) { 
      processJSON(data); 
      $('#example').dataTable({ 
       "sScrollY": "200px", 
       "bPaginate": false 
      }); 
     }); 
    }); 
});

来源

2011-04-10 22:56:12

谢谢你这么多亩太短。我非常喜欢你的分析，这有助于我理解为什么表格不响应dataTable。现在，该表具有我期待的所有优秀的滚动表功能。所以在填充表格后绑定dataTable是关键。 – 2011-04-10 23:16:46

@ C.L .:“给一个人一条鱼，你喂他一天;教一个人钓鱼，你一辈子喂他。”不要忘记通过点击答案旁边的复选标记来接受您的问题的答案。 – 2011-04-10 23:20:38

谢谢你太短了。从你的分析中，我肯定会学习如何在这种情况下钓鱼。现在我更好地理解如何在依赖另一个函数的结果时运行多个jQuery函数。 – 2011-04-11 03:29:38

，或者你可以只使用内置的方法添加JSON数据使用sAjaxSource表。

由于您的按钮是用json数据值硬编码的，因此您可以使用按钮来显示/隐藏表格。

来源

2012-03-13 18:13:15 brims

通过JSON文件在动态创建的表上运行dataTable

回答

相关问题