Issue in pagination with AJAX loading

I am trying to integrate pagination with search option using the AJAX method. When user search something or navigate the pages, instead of submitting the form and reloading the whole page again, I want to load the filtered list inside my view page. Even if there is some search filtering, user should be able navigate through pages(1, 2, 3..) using AJAX loading.

But I am not sure, how can I use the loadList() function in the pagination links which is automatically generated in codeigniter 4.

When I load the URL: http://localhost:8080/admin/test , it works fine.
When I click on the page links in the bottom, it is navigating to URL: http://localhost:8080/admin/test-list?filter_name=&filter_value=&page=4

I want to prevent this and instead, the javascript function: loadList(<page_number>) with corresponding page number should be the navigation link.

I have the following scripts in my CodeIgniter 4 application:

My main view page(test.php) is like this:

<div class="container" style="margin-top: 70px;">
<div class="row justify-content-center">
<div class="col-sm-12">    

    <div class="row">
        <div class="col-3">
            <select id="filter_name" class="form-select mb-3">
                <option value=""> -- Choose Filter -- </option>
                <option value="location">Location</option>
                <option value="region">Region</option>
                <option value="emirate">Emirate</option>
            </select>
        </div>
        <div class="col-3">
            <input type="text" placeholder="Enter Search Text" class="form-control" id="filter_value" />
        </div>
        <div class="col-3">
            <input type="button" class="btn btn-primary" value="Search" onclick="loadList()" />
        </div>
    </div>

    <div class="form-group">
        <div class="text-center">
            <div class="loaderImg" style="display: none;">
                <i class="fa fa-spinner fa-spin"></i> <small>Please wait ...</small>
            </div>
        </div>
    </div>

    <div id="list_strip">&nbsp;</div>

</div>
</div>
</div>


<script>
function loadList() {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $.ajax({
        url: "<?= site_url('/admin/test-list') ?>",
        data: {
            filter_name: document.getElementById("filter_name").value,
            filter_value: document.getElementById("filter_value").value,
        },
        beforeSend: function() {
            $(".loaderImg").show();
        },
    })
    .done(function(result) {
        $("#list_strip").html(result);
    })
    .fail(function(jqXHR, textStatus, error) {
        $("#list_strip").html(error);
    })
    .always(function() {
        $(".loaderImg").hide();
    });
}

$(document).ready(function() {
    loadList();
});

</script>

I have a AJAX listing page(test_ajax.php) which is loading inside the view is as shown:

<div class="row">
    <div class="col-12 text-end">Total Rows: <?= $recordCount ?></div>
</div>

<div class="d-flex flex-md-row w-100 py-3 fw-bold">
    <div class="flex-column col-4">Location</div>
    <div class="flex-column col-3">Region</div>
    <div class="flex-column col-3">Emirate</div>
    <div class="flex-column col-2">&nbsp;</div>
</div>

<div class="tableStripe">
    <?php foreach($locations as $eachItem): ?>
    <div id="listRow_<?= $eachItem['location_sl_no'] ?>" class="tableRow d-flex flex-md-row w-100 py-1 my-2 align-items-center rounded">

        <div class="flex-column col-4"><?= $eachItem['location_name'] ?></div>
        <div class="flex-column col-3"><?= $eachItem['region'] ?></div>
        <div class="flex-column col-3"><?= $eachItem['emirate'] ?></div>
        <div class="flex-column col-2">&nbsp;</div>
    </div>
    <?php endforeach; ?>
</div>

<?= $pager->links() ?>

And the Controller file(Admins.php) as follows:

...

public function testList() {
        if(!session()->get('isAdminLoggedIn')) {
            return redirect()->to('/admin/login'); // goto login page, if not loggedin
        }

        $data = [];

        echo view('components/admin_header', $data)
            . view('admin/test')
            . view('components/admin_footer');
    }


    public function testListAJAX() {
        $filterName = $this->request->getGet('filter_name');
        $filterValue = $this->request->getGet('filter_value');

        // $model = model(LocationModel::class);
        $model = new LocationModel();

        if($filterName != "" && trim($filterValue) != "") {
            $model->like($filterName, trim($filterValue));
        }

        $data = [];
        $data['recordCount'] = $model->countAllResults(false);
        $data['locations'] = $model->paginate(5);
        $data['pager'] = $model->pager;

        echo view('admin/test_ajax', $data);
    }

...

And the AppConfigRoutes.php file is as follows:

$routes->get('/admin/test', 'Admins::testList');
$routes->get('/admin/test-list', 'Admins::testListAJAX');

Can anyone guide me, how to fix this issue?