как получить Json и загрузить их в таблицу данных, используя Ajax?

Question

Я новичок в AJAX и API:

Я создал API (который возвращает массив элементов состояния)

1- Индекс. php имеет следующий код для ввода данных:

           <table id="example1" class="table table-bordered table-hover table-striped">
                     <thead>
                        <tr>
                           <th class="center">Code</th>
                            <th class="center">Description</th>
                            <th class="center">Status</th>
                            <th class="center">Edit</th>
                            <th class="center">Delete</th>
                        </tr>
                     </thead>
                            <tbody>

                            </tbody>
                    <tfoot class="table-condensed table-bordered">
                        <tr>
                            <th class="center">Code</th>
                            <th class="center">Description</th>
                            <th class="center">Status</th>
                            <th>Edit</th>
                            <th>Delete</th>
                        </tr>
                    </tfoot>
                </table>

Второй файл 2. php включает в себя код Javascript и Jquery и Ajax :

Я пишу код ниже, чтобы получить Json из API и извлечь строки в таблицу выше:

var table = $("#example1 tbody");

  $.ajax({
    url: 'API_ReadAllSeed_Status.php',
    method: "GET",
    xhrFields: {
       withCredentials: true
    },
    success: function (data) {
            table.empty();
        $.each(data.AllStatus, function () {

        var Active_Status = "";
        //the code below is to set a specific element depending on the result
        if (this["STATUS_ACTIVE"] == 1)
            {Active_Status = "<td><span class='label label-success'>Activated</span></td>";}
        else 
        {Active_Status = "<td><span class='label label-danger'>Deactivated</span></td>"}

        table.append("<tr><td>" + this["STATUS_CODE"] + "</td><td>" + this["STATUS_DESCRIPTION"] + "</td>" + Active_Status + "</td> <td><a href='' class='btn btn-app addeditdelete' value='" + this["STATUS_ID"] + "'><i class='fa fa-edit'></i> Edit </a></td> <td><a href='' class='btn btn-app addeditdelete' value='" + this["STATUS_ID"] + "'><i class='glyphicon glyphicon-trash'> </i> Delete</a></td> </tr>");
  });
 }
   });

Результат: Json получить успешно, как я хочу, но, как показано на рисунке, строки не вставляются в строки основного тела таблицы данных, так как внутри ничего не работает.

Мой вопрос:

Как я могу загрузить данные Json в таблицу данных и использовать все ее функции [поиск и разбиение на страницы и количество строк на странице].

Answer 1

После многих поисков и после попытки многих кодов я нашел следующее решение:

        { "data" : "STATUS_ACTIVE",
            render : function(data, type, row) {
                if (data == 1)
                    {data = "<span class='label label-success'>Activated</span>";}
                else 
                    {data = "<span class='label label-danger'>Deactivated</span>";}

                     return data;
             }    
     },

Answer 2

Наконец-то это работает, но все еще есть вопрос:

    $('#STATUS_TABLE').DataTable({
       "ajax": {
            "url": "API_ReadAllSeed_Status.php",
            "dataSrc": "AllStatus"
        },

            "columns": [
                { "data": "STATUS_CODE" },
                { "data": "STATUS_DESCRIPTION" },
                { "data": "STATUS_ALT_DESCRIPTION" },
                { "data": "STATUS_ACTIVE" }
            ]
    });

Вопрос: Как изменить формат строк и установить различные метки строк примера состояния со значением 1 = активный и 0 = деактивировать.