Codeigniter ajax pagination search results not working
Question
I am using the ajax pagination method from this site and made some minor changes : https://www.codexworld.com/codeigniter-ajax-pagination-with-search-filter/ This seems to work fine until I tried to use the pagination after searching.
Eg. When I search for something, the pagination links show up correctly, however when I click to the next page, it resets to the default pagination. Am I missing something? I have been looking and comparing for a whole day and can't seem to find what the problem is. I'm hoping someone can take a look at this for me and see if I have missed something.
This is the ajax pagination library
<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
class Ajax_pagination{
var $base_url = '';
var $total_rows = '';
var $per_page = 10;
var $num_links = 2;
var $cur_page = 0;
var $first_link = 'First';
var $next_link = '»';
var $prev_link = '«';
var $last_link = 'Last';
var $uri_segment = 3;
var $full_tag_open = '<ul class="pagination">';
var $full_tag_close = '</ul>';
var $first_tag_open = '<li>';
var $first_tag_close = '</li>';
var $last_tag_open = '<li>';
var $last_tag_close = '<li>';
var $cur_tag_open = '<li class="active"><a href="#">';
var $cur_tag_close = '</a></li>';
var $next_tag_open = '<li>';
var $next_tag_close = '</li>';
var $prev_tag_open = '<li>';
var $prev_tag_close = '</li>';
var $num_tag_open = '<li>';
var $num_tag_close = '</li>';
var $target = '';
var $anchor_class = '';
var $show_count = false;
var $link_func = 'getData';
var $loading = '.loading';
/**
* Constructor
* @access public
* @param array initialization parameters
*/
function CI_Pagination($params = array()){
if (count($params) > 0){
$this->initialize($params);
}
log_message('debug', "Pagination Class Initialized");
}
/**
* Initialize Preferences
* @access public
* @param array initialization parameters
* @return void
*/
function initialize($params = array()){
if (count($params) > 0){
foreach ($params as $key => $val){
if (isset($this->$key)){
$this->$key = $val;
}
}
}
// Apply class tag using anchor_class variable, if set.
if ($this->anchor_class != ''){
$this->anchor_class = 'class="' . $this->anchor_class . '" ';
}
}
function getCurrPage(){
return $this->cur_page;
}
/**
* Generate the pagination links
* @access public
* @return string
*/
function create_links(){
// If our item count or per-page total is zero there is no need to continue.
if ($this->total_rows == 0 OR $this->per_page == 0){
return '';
}
// Calculate the total number of pages
$num_pages = ceil($this->total_rows / $this->per_page);
// Is there only one page? Hm... nothing more to do here then.
if ($num_pages == 1){
// $info = 'Showing : ' . $this->total_rows;
$info = '';
return $info;
}
// Determine the current page number.
$CI =& get_instance();
if ($CI->uri->segment($this->uri_segment) != 0){
$this->cur_page = $CI->uri->segment($this->uri_segment);
// Prep the current page - no funny business!
$this->cur_page = (int) $this->cur_page;
}
$this->num_links = (int)$this->num_links;
if ($this->num_links < 1){
show_error('Your number of links must be a positive number.');
}
if ( ! is_numeric($this->cur_page)){
$this->cur_page = 0;
}
// Is the page number beyond the result range?
// If so we show the last page
if ($this->cur_page > $this->total_rows){
$this->cur_page = ($num_pages - 1) * $this->per_page;
}
$uri_page_number = $this->cur_page;
$this->cur_page = floor(($this->cur_page/$this->per_page) + 1);
// Calculate the start and end numbers. These determine
// which number to start and end the digit links with
$start = (($this->cur_page - $this->num_links) > 0) ? $this->cur_page - ($this->num_links - 1) : 1;
$end = (($this->cur_page + $this->num_links) < $num_pages) ? $this->cur_page + $this->num_links : $num_pages;
// Add a trailing slash to the base URL if needed
$this->base_url = rtrim($this->base_url, '/') .'/';
// And here we go...
$output = '';
// SHOWING LINKS
if ($this->show_count){
$curr_offset = $CI->uri->segment($this->uri_segment);
$info = 'Showing ' . ( $curr_offset + 1 ) . ' to ' ;
if( ( $curr_offset + $this->per_page ) < ( $this->total_rows -1 ) )
$info .= $curr_offset + $this->per_page;
else
$info .= $this->total_rows;
$info .= ' of ' . $this->total_rows . ' | ';
$output .= $info;
}
// Render the "First" link
if ($this->cur_page > $this->num_links){
$output .= $this->first_tag_open
. $this->getAJAXlink( '' , $this->first_link)
. $this->first_tag_close;
}
// Render the "previous" link
if ($this->cur_page != 1){
$i = $uri_page_number - $this->per_page;
if ($i == 0) $i = '';
$output .= $this->prev_tag_open
. $this->getAJAXlink( $i, $this->prev_link )
. $this->prev_tag_close;
}
// Write the digit links
for ($loop = $start -1; $loop <= $end; $loop++){
$i = ($loop * $this->per_page) - $this->per_page;
if ($i >= 0){
if ($this->cur_page == $loop){
$output .= $this->cur_tag_open.$loop.$this->cur_tag_close; // Current page
}else{
$n = ($i == 0) ? '' : $i;
$output .= $this->num_tag_open
. $this->getAJAXlink( $n, $loop )
. $this->num_tag_close;
}
}
}
// Render the "next" link
if ($this->cur_page < $num_pages){
$output .= $this->next_tag_open
. $this->getAJAXlink( $this->cur_page * $this->per_page , $this->next_link )
. $this->next_tag_close;
}
// Render the "Last" link
if (($this->cur_page + $this->num_links) < $num_pages){
$i = (($num_pages * $this->per_page) - $this->per_page);
$output .= $this->last_tag_open . $this->getAJAXlink( $i, $this->last_link ) . $this->last_tag_close;
}
// Kill double slashes. Note: Sometimes we can end up with a double slash
// in the penultimate link so we'll kill all double slashes.
$output = preg_replace("#([^:])//+#", "\\1/", $output);
// Add the wrapper HTML if exists
$output = $this->full_tag_open.$output.$this->full_tag_close;
?>
<script>
function getData(page){
$.ajax({
method: "POST",
url: "<?php echo site_url('/Common/Check'); ?>",
success: function(data){
if(data==true){
console.log(page);
$.ajax({
method: "POST",
url: "<?php echo $this->base_url; ?>"+page,
data: { page: page },
beforeSend: function(){
$('<?php echo $this->loading; ?>').show();
},
success: function(data){
console.log("<?php echo $this->base_url; ?>"+page);
$('<?php echo $this->loading; ?>').hide();
$('<?php echo $this->target; ?>').html(data);
}
});
}else{
window.location.href="<?php echo site_url('/');?>";
}
}
});
}
</script>
<?php
return $output;
}
function getAJAXlink($count, $text) {
$pageCount = $count?$count:0;
return '<a href="javascript:void(0);"' . $this->anchor_class . ' data-per-
page="'.$this->per_page.'" onclick="'.$this->link_func.'('.$pageCount.')">'.
$text .'</a>';
}
}
Controller
public function index()
{
$conditions = array();
$data = array();
$totalRec = count($this->ActivitiesModel->admin_get_and_search($conditions));
$config['target'] = '#list';
$config['base_url'] = site_url('/AdminActivities/Search');
$config['total_rows'] = $totalRec;
$config['per_page'] = $this->get_per_page();
$this->ajax_pagination->initialize($config);
$data['links'] = $this->ajax_pagination->create_links();
$data['datatable'] = $this->ActivitiesModel->admin_get_and_search(array('limit'=>$this->get_per_page()));
$data['user'] = $this->AccountModel->get_person($this->get_person_id());
$this->load->view('layout/admins/common/header');
$this->load->view('layout/admins/common/navigation');
$this->load->view('layout/admins/common/title');
$this->load->view('layout/admins/common/errors');
$this->load->view('admins/activities/index',$data);
$this->load->view('layout/admins/common/footer');
}
public function search(){
$conditions = array();
$page = $this->input->post('page');
if(!$page){
$offset = 0;
}else{
$offset = $page;
}
$keywords = $this->input->post('keywords');
if(!empty($keywords)){
$conditions['search']['keywords'] = $keywords;
}
$totalRec = count($this->ActivitiesModel->admin_get_and_search($conditions));
$config['target'] = '#list';
$config['base_url'] = site_url('/AdminActivities/Search');
$config['total_rows'] = $totalRec;
$config['per_page'] = $this->get_per_page();
$this->ajax_pagination->initialize($config);
$conditions['start'] = $offset;
$conditions['limit'] = $this->get_per_page();
$data['links'] = $this->ajax_pagination->create_links();
$data['datatable'] = $this->ActivitiesModel->admin_get_and_search($conditions);
$this->load->view('admins/activities/ajax_pagination', $data, false);
}
View
<script>
function searchFilter() {
// get current page number
var page_num = parseInt($('li.active a').text()) - 1;
// get active li parent element to get Data-Per-Page value
var active_parent = $('li.active a').parent('li');
console.log('page_num: ' + page_num);
var item_per_page = parseInt(active_parent.prev('li').find('a').data('per-page'));
// if NaN then use Next element
if (isNaN(item_per_page)) {
item_per_page = parseInt(active_parent.next('li').find('a').data('per-page'));
}
console.log('item_per_page: ' + item_per_page);
// Query string Keyword
var keywords = $('#search').val();
console.log('keywords: ' + keywords);
// Calculate the Offset
var page = (page_num * item_per_page);
console.log('page: ' + page);
// attach custom payload to ajax post
$.ajaxSetup({
data: {
'page': page_num,
keywords: keywords
},
});
$.ajax({
method: "POST",
url: "<?php echo site_url('/Common/Check'); ?>",
success: function(data){
if(data==true){
$.ajax({
type: 'POST',
url: '<?php echo site_url('/AdminDocuments/Search/'); ?>'+page_num,
data:'page='+page_num+'&keywords='+keywords,
beforeSend: function () {
$('.loading').show();
},
success: function (html) {
$('#list').html(html);
$('.loading').fadeOut("slow");
}
});
}else{
window.location.href="<?php echo site_url('AdminLogin');?>";
}
}
});
// Use same function to build filter output with pagination
getData(page);
}
</script>
<div id="maincontainer">
<div class="row col-sm-8">
<input type="text" name="search" id="search" class="form-control" placeholder="Search" onkeyup="searchFilter()">
</div>
<div id="list" class="row">
<div class="col-sm-12 table-responsive">
<table class="table">
<tbody>
<?php
if(!empty($datatable)){
foreach ($datatable as $data){
?>
<tr class="text-left">
<td><?php echo $data['action']; ?> onto the <?php echo $data['page']; ?> Page on <?php echo $data['created_on']; ?></td>
</tr>
<?php
}
}else{
?>
<tr>
<td colspan="7">You do not have any items at the moment</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<div class="pagination-links pull-right">
<?php echo $links; ?>
</div>
</div>
<div class="loading" style="display: none;">
<div class="content">
<img src="<?php echo base_url().'assets/images/loading/loading.gif'; ?>"/>
</div>
</div>
</div>
2 answers
solution1
1 ACCPTED 2017-06-24 14:30:18
Yes!, you are missing...
You missing to pass ' page_num ' in '
onkeyup="searchFilter()"'
You are using function like function searchFilter(page_num) { } But not sending the ' page_num ' value. Hence, it will always be ' 0 ' and your pagination will be reset, when you POST with AJAX..
Another approach is use Same getData(page) function written in Ajax_pagination library class. Before do this change a little bit code inside Class:
Update Ajax_pagination > getAJAXlink method:
function getAJAXlink($count, $text) {
$pageCount = $count?$count:0;
return '<a href="javascript:void(0);"' . $this->anchor_class . ' data-per-
page="'.$this->per_page.'" onclick="'.$this->link_func.'('.$pageCount.')">'.
$text .'</a>';
}
JavaScript:
<script type="text/javascript">
function searchFilter() {
// get current page number
var page_num = parseInt($('li.active a').text()) - 1;
// get active li parent element to get Data-Per-Page value
var active_parent = $('li.active a').parent('li');
// get per page count
var item_per_page = parseInt(active_parent.prev('li').find('a').data('per-page'));
// if NaN then use Next element
if (isNaN(item_per_page)) {
item_per_page = parseInt(active_parent.next('li').find('a').data('per-page'));
}
// Query string Keyword
var keywords = $('#search').val();
// Calculate the Offset
var page = (page_num * item_per_page);
// attach custom payload to ajax post
$.ajaxSetup({
data: {
'page': page_num,
keywords: keywords
},
});
// No Need to your Ajax Code Here, The getData already gives you filtered data
// and will set in #list, basically getData posting Common/Check url and getting data
// Here is getData post request analysis report.... :)
// Use same function to build filter output with pagination
getData(page);
}
</script>
Understand Flow of getData Ajax Request inside Ajax_pagination Class
<script type="text/javascript">
function getData(page) {
// ajax start
$.ajax({
method: "POST",
// sending request to Common/Check Controller/method
url: "<?php echo site_url('/Common/Check'); ?>",
success: function(data) {
// if response returns
if (data) {
console.log(page);
// call another ajax request
$.ajax({
method: "POST",
// sending request to Class Ajax_pagination Config base_url link
url: "<?php echo $this->base_url; ?>" + page,
// sending payloads page e.g. 10, 20, 30...
data: {
page: page
},
beforeSend: function() {
$('<?php echo $this->loading; ?>').show();
},
success: function(data) {
// if response returns
console.log("<?php echo $this->base_url; ?>" + page);
$('<?php echo $this->loading; ?>').hide();
// set response inside Ajax_pagination Config target element e.g #list
$('<?php echo $this->target; ?>').html(data);
}
});
} else {
window.location.href = "<?php echo site_url('/');?>";
}
}
});
}
</script>
A Good Way would be, Use CodeIgniter Builtin Pagination Class. It's very easy & you can find lots of example code by just Googling.
Then you can combined your Controller, Model & Views to Create Ajax Response , After all it's just matter to return a table html row with data or to return some div fancy stuff content . The logic is behind you can call simple ajax to build your content by using CodeIgniter Pagination Class inside your Controller and can get data by your Model by passing limit & Offset that's it!
Source & Docs: CodeIgniter Pagination Class
@JianYA, Please always check Browser Network Panel to see what response we are getting while using Ajax.. it might clear more doubts instead of assumptions. You are using ' Common/Check ' inside getData function , So here is some question for you:
- Do you have Common Controller & Check method?
- Do you set
$route['Common/Check'] = 'YourController/YourMethod';inroutes.phpinsideconfig folderif you don't have this Controller?
solution2
1 2018-09-28 10:04:53
hi guys without linking of database and using of ajax for autosearch with pagination here is the link and code to autosearch with pagination .i hope this help you.
https://datatables.net/examples/styling/bootstrap
Code:
<!DOCTYPE html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<body style="margin:20px auto">
<div class="container">
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th><div class="noCrsr">Name</div></th>
<th><div class="noCrsr">Position</div></th>
<th><div class="noCrsr">Office</div></th>
<th><div class="noCrsr">Age</div></th>
<th><div class="noCrsr">Start date</div></th>
<th><div class="noCrsr">Salary</div></th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
in the place of table data you have used to get the php values from database so it filter the search of only in table data itself.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Pagination with search results in Codeigniter
CodeIgniter Search Results Pagination
ajax pagination are not working in codeigniter?
codeigniter pagination for search not working
Codeigniter search with pagination is not working
Best solution for pagination results ajax codeigniter
Wordpress pagination not working in search results
Search filter not working properly with Pagination in Codeigniter
Cakephp ajax pagination for filters search results
Wordpress: Search results pagination still not working
Related Tags