как загрузить больше данных в таблицу внутри bootstrap модально при прокрутке, используя ajax в laravel

Question

Я работаю над jQuery загружать больше данных при прокрутке, я использую таблицу внутри bootstrap модального. и я хочу загрузить больше данных, когда полоса прокрутки достигнет конца. У меня есть это модальное окно, которое загружает в таблицу контент, который может быть обширным, исходя из запроса в Ajax

<div class="modal fade" id="allEmployeeListModal">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-body" id="employeeCodeListBody">
        <div class="row clearfix">
            <div class="table-responsive contact" style="height: 300px !important;"  
            onscroll="getMaxHite()">
                <table class="table table-hover mb-0 c_list c_table" id="employee_code_list_table">
                    <thead>
                        <tr>
                            <th>{{__('messages.code')}}</th>
                            <th>{{__('messages.l_name')}}</th>
                            <th>{{__('messages.f_name')}}</th>
                            <th>{{__('messages.action')}}</th>
                        </tr>
                    </thead>
                    <tbody class="bodyData">
      </tbody>
                </table>
            </div>
        </div>
        </div>
    </div>
</div>

JS:

function getMaxHite() {
    var page = 2;
    if($(this).scrollTop() + $(this).height() > $(this).height() - 290) {
       page++;
        showAllEmployeeList(page);
    }
}

Ajax:

function showAllEmployeeList(perPage) {

   $.ajax(
        {
            url: '{{route('employee.employeecode.list')}}?page='+perPage,
            type: "get",
            beforeSend: function()
            {
                $('.ajax-load').show();
            }
        })
        .done(function(data)
        {
            var tr_str = '';
            var resultData = data.data;

            $.each(resultData,function(index,record){      
                tr_str += '<tr>' +
                               '<td class="footable-first-visible" style="display: table-cell;">' +record.code+ '</td>' +
                               '<td style="display: table-cell;">' +record.l_name+ '</td>' +
                               '<td style="display: table-cell;">' +record.f_name+ '</td>' +
                               '<td class="footable-last-visible" style="display: table-cell;">' +record.job_status+ '</td>' +
                            '</tr>';

            });
            console.log(tr_str);
            $(".bodyData .footable-empty").remove();
            $("#employee_code_list_table").footable({"paging":{"enabled":false}});
            $('.bodyData').append(tr_str);
            $('#allEmployeeListModal').modal('show');

        })

И мой контроллер:

public function getCodeList(Request $request)
{
    $page = $request->page;
    $resultCount = 2;

    $offset = ($page - 1) * $resultCount;


    $query = Employee::select(['id','employee_code','code','l_name','f_name','job_status','active']);

    $employees = $query->skip($offset)->take($resultCount)->get();

    return response()->json(['data'=>$employees]);
    }

В настоящее время я использую следующий код. но не может загружать данные в модальную таблицу при прокрутке.