Ajax динамическая загрузка данных через Datatables

пытаюсь с помощью serverSide сделать динамическую загрузку данных в таблицу. У меня есть таблица выглядит она примерно так

html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>


<table cellspacing="0" class="display cell-border table table-sm table-striped table-bordered" width="100%" id="audience">

    <thead>
    <tr>
        <th>Корпус</th>
        <th>Этаж</th>
        <th>Комната</th>
        <th>Тип</th>
        <th>Подразделение</th>
        <th>Мест</th>
        <th>Компьютерных мест</th>
        <th>Действия</th>
    </tr>
    </thead>

    {#rows}

</table>

js

$(document).ready(function()  {
        var table = $('#audience').DataTable(
            {
                "serverSide": false,

                "ajax": '/ajax/audience/zxv',
                "data": JSON,
                "columns": [
                    { "data": "Корпус" , "width":"1%" },
                    { "data": "Этаж" , "width":"2%" },
                    { "data": "Комната" , "width":"2%" },
                    { "data": "Тип" , "width":"4%" },
                    { "data": "Подразделение" , "width":"10%" },
                    { "data": "Мест" , "width":"1%" },
                    { "data": "Компьютерных мест" , "width":"1%" },
                    { "data": "Действия" , "width":"1%" }

                ],

                language: tables_lang,
                pageLength: 10,
                orderCellsTop: true,
                fixedHeader: true,


                dom: 'l<"toolbar">frtip',
                initComplete: function(){
                    $("div.toolbar")
                        .html('<a href="https://dlk.pnzgu.ru/audience/add"><button class="btn btn-success ml-3 add_audience">Добавить</button></a>');
                }

            });
        $('#audience thead tr').clone(true).appendTo( '#audience thead' );
        $('#audience thead tr:eq(1) th').each( function (i) {
            var title = $(this).text();
            $(this).html( '<input type="text" placeholder="Поиск" />' );

            $( 'input', this ).on( 'keyup change', function () {
                if ( table.column(i).search() !== this.value ) {
                    table
                        .column(i)
                        .search( this.value )
                        .draw();
                }
            } );
        } );

Когда я задаю значение в serverSide - true У меня загружаются сразу все данные и происходит примерно следующее

php

if($request->hasValue("zxv")){

    $data = array(
        'data'=>
            array()
    );

    //получаем данные из бд
    $AudienceHome = $audienceHome->getDataRoom();

    
    if(is_array($AudienceHome)) {
        foreach($AudienceHome as $row) {
           
            //беру кнопки из шаблона
            $a = $templateHome->parse($modules_root . "audience/tpl/audience_row_table.tpl", $row);
            //формируем строки в таблице
            array_push($data['data'], array("Корпус" =>  $row['body'],"Этаж"=> $row['floor'],"Комната"=>$row['room'],
                                                  "Тип"=>'лекц.',"Подразделение"=>$row['dep'],"Мест"=>$row['places'],
                                                  "Компьютерных мест"=>$row['places_work'],"Действия"=>$a));
        }
    }



    echo json_encode($data);
}

сам json возвращается в таком виде

Что именно я делаю не так? Может нужно как-то по-другому формировать данные на сервере?