how to add datatable properties to an exiting data table ajax call

Question

I have a razor page where i was loading value using a list from the controller i am using datatable to sort and view the record.

I use the following script to achieve the datatable sorting and other functionalities

    <script>
            $(document).ready(function () {
                // Setup - add a text input to each footer cell
                $('#example thead tr').clone(true).addClass('filters').appendTo('#example thead');
    
    
                var table = $('#example').DataTable({
    
                    orderCellsTop: true,
                    fixedHeader: true,
                    scrollY: true,
                    scrollX: true,
    
                    initComplete: function () {
                        var api = this.api();
                        // For each column
                        api.columns().eq(0).each(function (colIdx) {
                            // Set the header cell to contain the input element
                            var cell = $('.filters th').eq($(api.column(colIdx).header()).index());
                            var title = $(cell).text();
                            $(cell).html('<input type="text" placeholder="' + "" + '" />');
                            // On every keypress in this input
                            $('input', $('.filters th').eq($(api.column(colIdx).header()).index()))
                                .off('keyup change')
                                .on('keyup change', function (e) {
                                    e.stopPropagation();
                                    // Get the search value
                                    $(this).attr('title', $(this).val());
                                    var regexr = '({search})'; //$(this).parents('th').find('select').val();
                                    var cursorPosition = this.selectionStart;
                                    // Search the column for that value
                                    api
                                        .column(colIdx)
                                        .search((this.value != "") ? regexr.replace('{search}', '(((' + this.value + ')))') : "", this.value != "", this.value == "")
                                        .draw();
                                    $(this).focus()[0].setSelectionRange(cursorPosition, cursorPosition);
                                });
                        });
                    }
                });
                table.columns.adjust().draw();
            });
    
    
        </script>

and my table is as follows

<table id="example" class="table table-striped table-bordered">

Now i have changed my razor page to load datatable via ajax call and i am mapping my ajax query values to datatable as follows

    success: function (response) {
                            console.log(response);
                            $('#example').dataTable({
                                data: response,
                                columns: [
                                    { 'data': 'employeeName' },
                                    { 'data': 'employeeAadharCardNumber' },
                                    { 'data': 'employeePanCardNumber' },
                                    { 'data': 'employeeManager' },
                                    
                                ],
                                autofill: true,
                                select: true,
                                responsive: true,
    
                            })
    
                        },
                        error: function (error) {
                            console.log(response);
                        }

since i have already initialized the datatable in a separate script i am not able to use the datatable functionalities like pagnation, search and sorting inside the ajax call..

Please help me how to combine the 2 seperate datatable script into 1 to use inside ajax