Question

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

    $(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。

Answer 1

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

解决方案是在填充表后绑定数据表：

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

Answer 2

或者您可以使用内置方法使用sAjaxSource将json数据添加到表中。

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

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

2 个答案: