Запустите dataTable для динамически созданной таблицы через файл JSON

Question

Я использую $ .getJSON для извлечения файла json, такого как purchase.json, и динамически создаю таблицу с помощью processJSON (данные), функции для динамического создания таблицы с содержимым JSON.Идентификатор таблицы - «пример».Затем мне нужно применить 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 не работали.Как настроить мой код, чтобы он работал?

Спасибо за помощь.CL

Answer 1

Я предполагаю, что ваша проблема в том, что $('#example').dataTable() выполняется до заполнения #example.В таблице #example ничего не будет, пока кто-нибудь не нажмет #AJAXButton и getJSON не завершится;таблица #example может существовать, когда вызывается .dataTable, но таблица данных не будет знать о данных, которые вы загружаете в таблицу из вашего большого двоичного объекта JSON.

Решением будет связывание таблицы данных после таблицызаполняется:

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

Answer 2

или вы можете просто использовать встроенный метод для добавления данных json в таблицу, используя sAjaxSource .

Поскольку ваша кнопка жестко запрограммирована со значением данных json, вы можете просто использовать кнопку, чтобы показать / скрыть таблицу.