问题
controller: test.php
public function get_exam_college($offset=null)
{
$this->load->library('table');
$this->load->library('pagination');
$field=$this->input->post('field');
$config['base_url'] = base_url('index.php/').'test/';
$config['total_rows'] = $this->dependent_field->count_field_exam($field);
$config['per_page'] = 10;
$config['full_tag_open'] = '<ul class="pagination" id="search_page_pagination">';
$config['full_tag_close'] = '</ul>';
$config['cur_tag_open'] = '<li class="active"><a href="javascript:void(0)">';
$config['num_tag_open'] = '<li>';
$config['num_tag_close'] = '</li>';
$config['cur_tag_close'] = '</a></li>';
$config['first_link'] = 'First';
$config['first_tag_open'] = '<li>';
$config['first_tag_close'] = '</li>';
$config['last_link'] = 'Next';
$config['last_tag_open'] = '<li>';
$config['last_tag_close'] = '</li>';
$config['next_link'] = FALSE;
$config['next_tag_open'] = '<li>';
$config['next_tag_close'] = '</li>';
$config['prev_link'] = FALSE;
$config['prev_tag_open'] = '<li>';
$config['prev_tag_close'] = '</li>';
$config['page_query_string'] = FALSE;
$this->pagination->initialize($config);
$data['field'] = $this->dependent_field->field_exam_college($field,$config['per_page'],$offset);
$this->load->view('exam-colleges',$data);
}
view: exam-colleges.php
<div id="container">
<div id="body">
<?php
foreach ($field as $fetch)
{
?>
<p id="name"><?php echo $fetch['college_name']; ?></p>
<?php
}
?>
<?php
echo $this->pagination->create_links();
?>
</div>
</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
$('body').on('click','ul#search_page_pagination>li>a',function(e){
e.preventDefault();
var Pagination_url = $(this).attr('href');
$.ajax({
url:Pagination_url,
type:'POST',
success:function(data){
var $page_data = $(data);
$('#container').html($page_data.find('div#body'));
$('table').addClass('table');
}
});
});
});
</script>
I am creating ajax pagination in codeigniter. When I search result data are showing perfectly with limit 10 per page and pagination are also showing. But the problem is that when I click on pagination it change the url and display nothing for example if my link is :
http://localhost/cs/index.php/test
after click on pagination button url link change into
http://localhost/cs/index.php/test/10
Where it display nothing. So, how can I remove this problem and showing data with pagination ? Please help me.
Thank You
回答1:
On your controller create a function seperate for pagination and use json
On the Ajax URL and pagination URL make sure you change it to what you want it is only an example below.
<?php
class Example extends CI_Controller
{
public function __construct()
{
parent::__construct();
}
public function index()
{
$this->load->view('common/example_view');
}
public function pagination()
{
$json = array();
$this->load->library('pagination');
$config['base_url'] = base_url('example/pagination');
$config['total_rows'] = $this->pagination_total_rows();
$config['per_page'] = '2';
$config['uri_segment'] = 3;
$config["use_page_numbers"] = TRUE;
$config['num_links'] = "16";
$config['full_tag_open'] = "<ul class='pagination'>";
$config['full_tag_close'] = "</ul>";
$config['num_tag_open'] = '<li>';
$config['num_tag_close'] = '</li>';
$config['cur_tag_open'] = "<li class='disabled'><li class='active'><a href='#'>";
$config['cur_tag_close'] = "<span class='sr-only'></span></a></li>";
$config['next_tag_open'] = "<li>";
$config['next_tagl_close'] = "</li>";
$config['prev_tag_open'] = "<li>";
$config['prev_tagl_close'] = "</li>";
$config['first_tag_open'] = "<li>";
$config['first_tagl_close'] = "</li>";
$config['last_tag_open'] = "<li>";
$config['last_tagl_close'] = "</li>";
$this->pagination->initialize($config);
$page = $this->uri->segment(3);
$start = ($page - 1) * $config["per_page"];
$json = array(
'pagination_links'=> $this->pagination->create_links(),
'pagination_results' => $this->pagination_data($config["per_page"], $start)
);
$this->output
->set_content_type('application/json')
->set_output(json_encode($json));
}
public function pagination_data($limit, $start)
{
$this->db->limit($limit, $start);
$query = $this->db->get($this->db->dbprefix . 'movie');
return $query->result_array();
}
public function pagination_total_rows()
{
$query = $this->db->get($this->db->dbprefix . 'movie');
return $query->num_rows();
}
}
Then on the view use ajax like
view: example_view.php
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="page-header">
<h1>Ajax Pagination</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div id="body">
</div>
<div id="pagination_links"></div>
</div>
</div>
</div>
<script type="text/javascript">
function loadpag(page){
$.ajax({
url: "<?php echo base_url('example/pagination');?>/" + page,
type: 'get',
dataType: 'json',
success: function(json) {
table = '<table class="table table-striped table-bordered">';
table += '<thead>';
table += '<tr>';
table += '<th>SomeName</th>';
table += '<th>SomeName</th>';
table += '</tr>';
table += '</thead>';
table += '<tbody>';
$.each(json['pagination_results'], function(key, value) {
table += '<tr>';
table += '<td>' + value['movie_id'] + '</td>';
table += '<td>' + value['movie_name'] + '</td>';
table += '</tr>';
});
table += '</tbody>';
table += '</table>';
$('#body').html(table);
$('#pagination_links').html(json['pagination_links']);
},
});
}
loadpag(1);
$(document).ready(function(){
$(document).on("click", ".pagination li a", function(event){
event.preventDefault();
var page = $(this).data("ci-pagination-page");
loadpag(page);
});
});
</script>
回答2:
It seems you have a wrong selector in jQuery function.
You should use $('#body') for <div id="body">.
来源：https://stackoverflow.com/questions/45567423/how-to-show-ajax-pagination-data-without-refresh-or-reload-a-page-in-codeigniter