не может получить данные JSON в таблицы данных в AJAX

Question

У меня есть такой код для извлечения данных из JSON Response в AJAX:

$(function QRData () {
            $.ajax({
                url: "QR",
                dataType: "json",
                method: "GET",
                success: function (response) {
                    var Data = '<thead> <tr><td> Amount </td> <td> Terminal </td> <td> User Smartphone </td></tr> <tbody>';

                    $.each(response, function (idx, obj) {
                        Data += '<tr>';

                        $.each(obj, function (key, value) {
                            Data += '<td>' + value + '</td>';
                        });
                        Data += '</tr>'
                    });

                    Data += '</tbody>';
                    $('#QRTable').html(Data);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                }
            });
            setTimeout(QRData,1000);
        });

, что успех показывает данные с call id = "QRTable", но теперь я хочу добавить в datatables, я попытался так:

$(".QRTable").DataTable({
            ajax:
                {
                    url: "QR",
                    dataType: "json",
                    method: "GET",
                    success: function (response) {
                        var Data = '<thead> <tr><td> Amount </td> <td> Terminal </td> <td> User Smartphone </td></tr> <tbody>';

                        $.each(response, function (idx, obj) {
                            Data += '<tr>';

                            $.each(obj, function (key, value) {
                                Data += '<td>' + value + '</td>';
                            });
                            Data += '</tr>'
                        });

                        Data += '</tbody>';
                        $('#QRTable').html(Data);
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                    }
                }
        });

но это не показывать данные. любой ключ к правильному пути? В другой ситуации я включаю таблицы данных сценария, пример строки кода, подобный этому:

datatables/media/js/jquery.dataTables.min.js"></script>

тогда я вызываю id = "datatable-table" в

<table id="datatables-table">

и добавьте некоторые данные, как обычно, вот так:

<table id="datatable-table" class="table table-striped table-hover">
                    <thead>
                    <tr>
                        <th>No</th>
                        <th>Amount</th>
                        <th class="hidden-xs">Terminal</th>
                        <th class="hidden-xs">User Smartphone</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1</td>
                        <td><span class="fw-semi-bold">Algerd</span></td>
                        <td class="hidden-xs">
                            <small>
                                <span class="fw-semi-bold">Type:</span>
                                &nbsp; JPEG
                            </small>
                            <br>
                            <small>
                                <span class="fw-semi-bold">Dimensions:</span>
                                &nbsp; 200x150
                            </small>
                        </td>
                        <td class="hidden-xs"><a href="#">Palo Alto</a></td>

                    </tr>
</table>

этот способ работает для отображения данных в таблицах данных.