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"> </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"> </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"> </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?