Server-side processing DataTables

I'm trying to dynamically load data into a table, but on each page all records are loaded at once.

my html:

<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>

</table>

js

<script>
  
    $(document).ready(function()  {
        var table = $('#audience').DataTable(
            {
                "serverSide": true,
                "processing": true,
                "ajax": '/ajax/audience/zxv',
                "data": JSON,

                "columns": [
                    { "data": "Корпус"},
                    { "data": "Этаж"},
                    { "data": "Комната"},
                    { "data": "Тип"},
                    { "data": "Подразделение"},
                    { "data": "Мест"},
                    { "data": "Компьютерных мест"},
                    { "data": "Действия"}

                ],

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


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

            });

        $('#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();
                }
            } );
        } );


        table.state.clear();
        table.draw();

    });


</script>

php

if($request->hasValue("zxv")){
    //i call the function to find out which page is now
    $draw = $audienceHome->getDrawDatatables();

    $data = array(
        'draw' =>($draw),
        'recordsTotal' =>("680"),
        'recordsFiltered' =>("680"),
        'data'=>
            array()
    );


    //filled in the data from the DB
    //i just get data from database using sql query and put it in array
    $arr = $audienceHome->tesr();
    $data['data'] = $arr;

    echo json_encode($data);
}

what do i getting in json:

the table simply displays all the records at once, as well as when switching the page, regardless of how much I put 10,25,50

what should I do? so that the records are loaded gradually? Thanks in advance!