如何在codeigniter中显示ajax分页数据而不刷新或重新加载页面？

Question

控制器：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);
    }

查看：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>

我在 codeigniter 中创建 ajax 分页。当我搜索结果数据显示完美时，每页限制为 10 并且分页也显示出来。但问题是，当我点击分页时，它会更改 url 并且不显示任何内容，例如，如果我的链接是：

http://localhost/cs/index.php/test

点击分页按钮后url链接变为

http://localhost/cs/index.php/test/10

它什么都不显示。那么，我怎样才能消除这个问题并用分页显示数据呢？请帮帮我。

谢谢

Answer 1

在你的控制器上创建一个单独的分页函数并使用 json

在 Ajax URL 和分页 URL 上，确保将其更改为您想要的 希望它只是下面的一个例子。

<?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();
}

}

然后在视图上使用 ajax 之类的

查看：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>

Answer 2

您在 jQuery 函数中似乎有一个错误的选择器。 你应该使用$('#body') 代替<div id="body">。