Question

我正在尝试将表启动为空而没有<tbody>中的数据，并选择一些通过$.getJSON发送到服务器的参数，并将返回的json数据附加到<tbody>内。

但看起来因为$(document).ready()它使它无法正常工作，分页和搜索完全停止工作。

顺便说一下，我已经包含了所有需要的文件，我知道错误是因为我在页面加载后填充表格，我只是想知道是否有另一种方法来解决这个问题。

这是我的代码：

<script type="text/javascript" src="../js/jquery.dataTables.js"></script>
        <script type="text/javascript">
            $(document).ready(function()
            {
                $('#contacts').dataTable({
                    "sPaginationType" : "full_numbers"
                });

                $("#submit").click(function()
                      {
                    $.getJSON("/myurl",
                    function(data) 
                    {
                        $("#table_body").empty();
                        $.each(data, function(i, item) 
                        {                                    
                            $("#table_body").show("slow");
                            $("#table_body")
                            .append(
                                '<tr class="gradeC">' +
                                    '<td>' + item.name+ '</td>' +
                                    '<td>' + item.birthdate + '</td>' +
                                    '<td>' + item.age + '</td>' +
                                '</tr>'
                            );
                        });
                    });
                });
            });
        </script>

<!-- NOW THE HTML CODE FOR THE TABLE -->

<table cellpadding="0" cellspacing="0" border="0" class="display" id="contacts">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Birthdate</th>
                                        <th>Age</th>
                                    </tr>
                                </thead>
                                <tbody id="table_body"></tbody>
                                <tfoot>
                                    <tr>
                                        <th>Name</th>
                                        <th>Birthdate</th>
                                        <th>Age</th>
                                    </tr>
                                </tfoot>
                            </table>

Answer 1

您似乎没有正确使用Datatables API。阅读the documentation并尝试使用datatables方法添加行并清空表格等。

Answer 2

请尝试使用$(function() { ... });语法。我最近遇到$(document).ready(function() { ... });无效的问题。我尝试了新的语法并修复了它......

希望这有帮助。

Answer 3

fnAddData（）不应该用于逐行加载整个内容。要从JSON表内容，您可以在sAjaxSource属性中设置此URL并定义JSON属性和列之间的映射。请参阅以下示例：

http://datatables.net/release-datatables/examples/ajax/objects.html

http://datatables.net/release-datatables/examples/ajax/deep.html

我相信你的方法有效，但看看这个页面也许用这种方式加载它们会更容易。

约万

$（document）.ready（）使数据表无法正常工作

3 个答案: