$ (document) .ready () делает данные неработоспособными

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

Не похоже, что вы используете API Datatables правильно.Прочитайте документацию и попробуйте использовать методы datatables для добавления строк, очистки таблицы и т. Д.

Answer 2

Попробуйте вместо этого использовать синтаксис $(function() { ... });. У меня недавно была проблема, когда $(document).ready(function() { ... }); не работал. Я попробовал новый синтаксис, и он исправил это ...

Надеюсь, это поможет.

Answer 3

fnAddData () не должен использоваться для загрузки всего содержимого строка за строкой.Для отображения содержимого из JSON вы можете установить этот URL в свойстве sAjaxSource и определить сопоставления между свойствами JSON и столбцами.См. Примеры на:

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

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

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

Йован